0.11 组件提示

2014 年 12 月 8 日

注意：本文包含有关已过时的 0.11 版本的信息。请参阅 0.12 版本说明 以了解 API 中的更改。

0.11 版本的发布引入了 许多更改，但最重要的更改是新的组件作用域的工作方式。在之前的 0.10.x 版本中，组件默认继承作用域。这意味着在子组件模板中，您可以引用父作用域属性。这通常会导致紧密耦合的组件，其中子组件假设了解父作用域中存在哪些属性。在子组件中意外引用父作用域属性也是可能的。

隔离作用域和数据传递

从 0.11 版本开始，所有子组件默认具有隔离作用域，控制组件数据访问的推荐方法是通过 显式数据传递，使用 v-with 或 paramAttributes。

paramAttributes 使我们能够编写 Web 组件样式的模板

Vue.component('my-component', {
  paramAttributes: ['params'],
  compiled: function () {
    console.log(this.params) // passed from parent
  }
})

<my-component params="{{params}}"></my-component>

它属于哪里？

在之前的 0.10 版本中，组件容器元素上的所有指令都在子组件的作用域内编译。由于它继承了父作用域，因此这在大多数情况下都有效。从 0.11.1 版本开始，我们希望提供组件作用域之间更清晰的分隔。经验法则是：如果某个内容出现在父模板中，它将在父作用域内编译；如果它出现在子模板中，它将在子作用域内编译。例如

<!-- parent template -->
<div v-component="child" v-on="click:onParentClick">
  <p>{{parentMessage}}</p>
</div>

<!-- child template, with replace: true -->
<div v-on="click:onChildClick">
  <h1>{{childMessage}}</h1>
  <content></content>
</div>

父模板中的所有内容都将在父作用域内编译，包括将要插入子组件的内容。

该规则的唯一例外是 v-with（以及编译为 v-with 的 paramAttributes），它在两个地方都有效 - 所以您不必太担心它。

更清晰的事件通信

以前，子组件与其父组件通信的标准方法是通过分派事件。但是，使用这种方法，父组件上的事件监听器不能保证只监听所需的子组件。如果我们不取消事件，也可能触发链条中更上层的意外监听器。

最常见的用例是让父组件对来自特定直接子组件的事件做出反应。因此，在 0.11.4 版本中，引入了新的指令 v-events 来实现这种行为。

0.11.4 已经发布，赶快试试吧！