[TOC] ## 使用组件 ### 注册 我们可以通过以下方式创建一个 Vue 实例: ~~~ new Vue({ el: '#some-element', // 选项 }) ~~~ 要注册一个全局组件,你可以使用 Vue.component(tagName, options)。 例如: ~~~ Vue.component('my-component', { // 选项 }) ~~~ 组件在注册之后,便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用。要确保在初始化根实例 之前 注册了组件: ~~~ <div id="example"> <my-component></my-component> </div> ~~~ ~~~ // 注册 Vue.component('my-component', { template: '<div>A custom component!</div>' }) // 创建根实例 new Vue({ el: '#example' }) ~~~ >[info] 完整代码示例: ~~~ <div id="example"> <my-component></my-component> </div> <script type="text/javascript"> // 注册 Vue.component('my-component', { template: '<div>A custom component!</div>' }) // 创建根实例 new Vue({ el: '#example' }) </script> ~~~ 渲染为: ~~~ <div id="example"> <div>A custom component!</div> </div> ~~~ 效果如图: ![](https://box.kancloud.cn/47f3b6e86da20220815869b6a91a96be_631x337.png) ### 局部注册 不必在全局注册每个组件。通过使用组件实例选项注册,可以使组件仅在另一个实例/组件的作用域中可用: ~~~ var Child = { template: '<div>A custom component!</div>' } new Vue({ // ... components: { // <my-component> 将只在父模板可用 'my-component': Child } }) ~~~ >[info] 完整代码示例: ~~~ <script type="text/javascript"> new Vue({ el:'#example', components: { 'my-component':{ template: '<div>A custom component!</div>' } } }) </script> ~~~ 这种封装也适用于其它可注册的 Vue 功能,如指令。 ### DOM模板解析说明 当使用 DOM 作为模版时(例如,将 el 选项挂载到一个已存在的元素上), 你会受到 HTML 的一些限制,因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素 `<ul> `,`<ol>`,`<table>` ,`<select>` 限制了能被它包裹的元素, 而一些像 <option> 这样的元素只能出现在某些其它元素内部。 在自定义组件中使用这些受限制的元素时会导致一些问题,例如: ~~~ <table> <my-row>...</my-row> </table> ~~~ 自定义组件 <my-row> 被认为是无效的内容,因此在渲染的时候会导致错误。变通的方案是使用特殊的 is 属性: ~~~ <table> <tr is="my-row"></tr> </table> ~~~ >[info]完整代码示例: ~~~ <div id="app"> <table border="1" cellpadding="5" cellspacing="0"> <my-row></my-row> <tr is="my-row"></tr> </table> </div> <script type="text/javascript"> new Vue({ el:'#app', data:{ message:'前端研习社' }, components:{ myRow:{ template:'<tr><td>123456</td></tr>' } } }); </script> ~~~ ![](https://box.kancloud.cn/b23c62f27ee9956b4f8c41f9f74edad6_1153x523.png) 应当注意,如果您使用来自以下来源之一的字符串模板,这些限制将不适用: - <script type="text/x-template"> - JavaScript内联模版字符串 - vue 组件 因此,有必要的话请使用字符串模版。 ### data必须是函数 通过Vue构造器传入的各种选项大多数都可以在组件里用。 data 是一个例外,它必须是函数。 实际上,如果你这么做: ~~~ Vue.component('my-component', { template: '<span>{{ message }}</span>', data: { message: 'hello' } }) ~~~ 那么 Vue 会停止,并在控制台发出警告,告诉你在组件中 data 必须是一个函数。理解这种规则的存在意义很有帮助,让我们假设用如下方式来绕开Vue的警告: ~~~ <div id="example-2"> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> </div> ~~~ ~~~ var data = { counter: 0 } Vue.component('simple-counter', { template: '<button v-on:click="counter += 1">{{ counter }}</button>', // 技术上 data 的确是一个函数了,因此 Vue 不会警告, // 但是我们返回给每个组件的实例的却引用了同一个data对象 data: function () { return data } }) new Vue({ el: '#example-2' }) ~~~ >[info] 完整代码示例: ~~~ <div id="example-2"> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> </div> <script type="text/javascript"> var data = { counter: 0 } Vue.component('simple-counter', { template: '<button v-on:click="counter += 1">{{ counter }}</button>', // 技术上 data 的确是一个函数了,因此 Vue 不会警告, // 但是我们返回给每个组件的实例的却引用了同一个data对象 // data: { // message: 'hello' // } data: function () { return data } }) new Vue({ el: '#example-2' }) </script> ~~~ 演示效果如图: ![](https://box.kancloud.cn/61b1ee4871ba82203bb8ab2e189626ba_374x60.gif) 由于这三个组件共享了同一个 data , 因此增加一个 counter 会影响所有组件!这不对。我们可以通过为每个组件返回全新的 data 对象来解决这个问题: ~~~ data: function () { return { counter: 0 } } ~~~ 现在每个 counter 都有它自己内部的状态了: >[info] 完整代码示例: ~~~ <div id="example-2"> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> </div> <script type="text/javascript"> var data = { counter: 0 } Vue.component('simple-counter', { template: '<button v-on:click="counter += 1">{{ counter }}</button>', // 技术上 data 的确是一个函数了,因此 Vue 不会警告, // 但是我们返回给每个组件的实例的却引用了同一个data对象 // data: { // message: 'hello' // } // data: function () { // return data // } data: function () { return { counter: 0 } } }) new Vue({ el: '#example-2' }) </script> ~~~ 演示效果如图: ![](https://box.kancloud.cn/27c452b76eb1c6697b5ed61b67d26a63_374x60.gif) ### 构成组件 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件。然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性。 在 Vue.js 中,父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。看看它们是怎么工作的。 ![](https://box.kancloud.cn/27584e95845e262286d25c47d44e0979_790x646.png)