javascript - 为什么我的组件无法获取其父级数据，除非在 RactiveJS 中指定

Question

我创建了一个在父级中调用的组件，但是在尝试通过键路径函数获取组件中的值时，它是空的。现在，除非我直接在组件模板中调用此键路径，否则它似乎不存在，即使它仍然存在于父级中。下面的例子来说明这一点。

http://jsbin.com/golen/1/edit?html,js

Answer 1

发生的事情是 this 是组件:

<p>Date: {{ startTime(this) }}</p>

指的是ticket组件中的默认上下文(组件获取自己的数据内容)，而不是ticket组件中的上下文。

但是，组件将在父级上下文中寻找它在其上下文中找不到的属性(除非已在组件上设置了 isolated: true ，在这种情况下它将不会'不要离开它的上下文)。当它找到这些属性时，它会在自己的上下文中“借用”它们(保持所有内容同步)，您可以通过将 {{JSON.stringify(.)}} 添加到票证组件来查看:

> Object {title: "1st Release", price: "10.00", startTime: function} 

因此，一个简单的解决方法就是直接在组件中使用 sale_start 属性:

<p>Date: {{ startTime(sale_start) }}</p>

或者，如果您愿意，您可以只访问函数中的数据:

startTime: function () {
  return this.get('sale_start');
}

传入属性或使用 get 语法的优点是您将获得属性的自动更新。如果 sale_start 的值发生变化，传入上下文 this 并调用 this.sale_start 不会自动更新。

如果您使用计算属性:

computed: {
    startTime: 'humaneDate(${sale_start})'
}

您可以在模板中将其作为属性而不是函数引用:

<p>Date: {{ startTime }}</p>

另一个选项是通过将整个票证数据对象显式声明为参数，将其带入组件上下文:

<ticket ticket="{{.}}"/>

如果您需要大量操作组件中的对象，而不是格式化和显示一些属性，那么这可能是有利的。请记住，此更改会在票证组件数据上下文上创建一个 ticket 属性，因此可以方便地为票证创建 block :

{{#ticket}}
<div class="ticket">
  <p>Title: {{ title }}</p>
  <p>Price: {{ price }}</p>
  <p>Date: {{ startTime(.) }}</p>
</div>
{{/}}

尽管仅使用它就可以正常工作(假设您在 startTime 函数中使用 sale_start 或 ticket.sale_start :

<div class="ticket">
  <p>Title: {{ title }}</p>
  <p>Price: {{ price }}</p>
  <p>Date: {{ startTime(sale_start) }}</p>
</div>