道具和模板答案

【问题标题】：Props and Templates道具和模板
【发布时间】：2019-06-22 05:06:44
【问题描述】：

我只是在创建我的第一个自定义组件，而且我真的在为基础知识而苦苦挣扎。我的组件：

<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 is undefined。

（我知道

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

根据样式指南是不正确的。但我也无法使用首选格式。）

我在这里错过了什么？

【问题讨论】：

标签： nativescript-vue

【解决方案1】：

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

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

应该是

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

【讨论】：

谢谢！想我试过了，但可能被早期的酒吧名称搞砸了。如果 bar 是 currentSlate，模板会使用什么？
@EdJones 我不确定你在问什么？但除了我的回答之外，在 Vue 中不应该经常需要像 (var slateTitle;) 这样的变量。你的变量应该在数据函数中定义
抱歉，我没戴眼镜在手机上打字。是的，我的意思是 var。
我从未见过任何解释 NativeScript-vue 中的数据函数与单文件组件。基本文档/生态系统的巨大差距。已经进行了几个月的随机试验。
那是因为假设你对 Vue.js 有基本的了解。如果您打算花一些时间在 NativeScript-Vue 中进行开发，我强烈建议您先学习 Vue。