使用组件

[TOC] ## 使用组件 ### 注册 我们可以通过以下方式创建一个 Vue 实例： ~~~ new Vue({ el: '#some-element', // 选项 }) ~~~ 要注册一个全局组件，你可以使用 Vue.component(tagName, options)。 例如： ~~~ Vue.component('my-component', { // 选项 }) ~~~ 组件在注册之后，便可以在父实例的模块中以自定义元素 的形式使用。要确保在初始化根实例 之前 注册了组件： ~~~ ~~~ ~~~ // 注册 Vue.component('my-component', { template: '' }) // 创建根实例 new Vue({ el: '#example' }) ~~~ >[info] 完整代码示例： ~~~ ~~~ 渲染为： ~~~ ~~~ 效果如图：  ### 局部注册 不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用： ~~~ var Child = { template: '' } new Vue({ // ... components: { // 将只在父模板可用 'my-component': Child } }) ~~~ >[info] 完整代码示例： ~~~ ~~~ 这种封装也适用于其它可注册的 Vue 功能，如指令。 ### DOM模板解析说明 当使用 DOM 作为模版时（例如，将 el 选项挂载到一个已存在的元素上）, 你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素 `

`，`
`，`` ，`` 限制了能被它包裹的元素， 而一些像 这样的元素只能出现在某些其它元素内部。 在自定义组件中使用这些受限制的元素时会导致一些问题，例如： ~~~ ... ~~~ 自定义组件 被认为是无效的内容，因此在渲染的时候会导致错误。变通的方案是使用特殊的 is 属性： ~~~ ~~~ >[info]完整代码示例： ~~~
~~~  应当注意，如果您使用来自以下来源之一的字符串模板，这些限制将不适用： - ~~~ 演示效果如图：  由于这三个组件共享了同一个 data ， 因此增加一个 counter 会影响所有组件！这不对。我们可以通过为每个组件返回全新的 data 对象来解决这个问题： ~~~ data: function () { return { counter: 0 } } ~~~ 现在每个 counter 都有它自己内部的状态了： >[info] 完整代码示例： ~~~
~~~ 演示效果如图：  ### 构成组件 组件意味着协同工作，通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。然而，在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性。 在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。