Question

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

Answer 1

发生了什么this是组件：

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

是指票证组件中的默认上下文（组件获取其自己的数据内容），而不是票证组件中的上下文。

然而，组件将寻找它在父上下文中可以找到的属性（除非在组件上设置isolated: true，否则在哪种情况下它不会离开它的背景）。当它找到那些属性时，它会借用＆＃34;它们在自己的上下文中（保持所有内容同步），您可以通过将{{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语法的一个好处是，您将获得有关该属性的自动更新。如果this的值发生变化，则传递上下文this.sale_start并致电sale_start将无法自动更新。

如果您使用计算属性：

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

您可以在模板中将其称为属性而不是函数：

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

另一个选项是通过将整个票证数据对象明确声明为参数来将其整合到组件上下文中：

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

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

{{#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>