道具和模板

Question

我刚刚创建我的第一个自定义组件，我真的很难掌握基础知识。我的组件：

<template>
<StackLayout>
  <Label :text="title" />
  <Label :text="slate.description" />
</StackLayout>
</template>

<script>
var slate;
export default {
name: "SlateComponent",

props:
  ['slate', 'title'],

data() {
  return {
    slate: slate,    
  };
},    
}
</script>

该组件将定期更新，并占据应用程序主页的大块：

<template>
<Page class="Page" actionBarHidden="true" backgroundSpanUnderStatusBar="true" >
<StackLayout>
    <StackLayout row="0">
      ...
    </StackLayout>
    <StackLayout row="1">
          <SlateComponent :title="title" :slate="slate" />
    </StackLayout>
...
</Page>
</template>

<script>
...

    import SlateComponent from "./SlateComponent";

    var slateTitle;
    var title;
    var gameSlates;
    var currentSlate;
    var slate;

    data() {
            return {
                events: events,
                title: title,
                slate: slate,
            };
        },


    async created() {
            this.gameSlates = await getGameSlates();
            this.currentSlate = this.gameSlates[2];
            this.title = this.currentSlate.description;
            console.info("The title is: " + this.title);
            this.slate = this.currentSlate;
    }
    };

结果：无论我做什么，都没有 props 对象传递给组件。

如果我注释掉该应用程序可以正常编译和运行，记录 currentSlate 或其属性、description 并显示组件，包括 title.

但是，当我包含该行时，它爆炸了，并出现错误：slate 未定义。

（我知道

props:
      ['slate', 'title'],

根据风格指南是不合适的。但我也无法使用首选格式。)

我在这里错过了什么？

Answer 1

在模板之外的任何地方访问道具时，需要this

 data() {
      return {
        slate: slate,    
      };
    }

应该是

data() {
  return {
    slate: this.slate   
  };
},

道具和模板

Props and Templates

nativescript-vue