<script src="https://www.jb51.net/public/javascripts/vue.js"></script> <style> #app1{background-color: red} #app2{background-color: blue} </style> <body> <div> <box-one></box-one> <box-two></box-two> <boxThree></boxThree> </div> <div> <box-one></box-one> <box-two></box-two> </div> <box-one></box-one> <box-two></box-two> <script> Vue.component('box-one', { template: '<div>box-one</div>' }); var app1 = new Vue({ el: '#app1', components: { 'box-two': { template: '<div>box-two</div>' }, 'boxThree': { template: '<div>boxThree</div>' } } }); var app2 = new Vue({ el: '#app2' }); </script>
Vue.component 方法用于注册全局组件， new Vue({ components: {}}) 用于注册某个实例内使用的组件，所以 <box-two></box-two> 在 #app2 中失效；
由于浏览器渲染标签时会把标签全部转成小写，驼峰式组件名称会失效，如事例中的 <boxThree></boxThree> ；
在实例以外无法使用任何组件；
2. 浏览器渲染网页标签的限制：
<script src="https://www.jb51.net/public/javascripts/vue.js"></script> <style> .red{background-color: red} .blue{background-color: blue} </style> <body> <div> <table> <box-one></box-one> </table> <select> <box-two></box-two> </select> <table> <tr is="box-one"></tr> </table> <select> <option is="box-two"></option> </select> </div> <script> Vue.component('box-one', { template: '<tr><td>box-one</td></tr>' }); Vue.component('box-two', { template: '<option>option</option>' }); var app1 = new Vue({ el: '#app1' }); </script>
由于受到浏览器渲染标签的限制，例如 table 标签子元素只能是 tbody 或 tr 、select 标签子元素只能是 option ，类似的其他更多的标签，所以 vue 引入了 is 属性；
如果使用的是组件文件 .vue 后缀的文件开发，则因为是字符串方式渲染的，所以不受限制；
3. 组件中的 data 数据集：
<script src="https://www.jb51.net/public/javascripts/vue.js"></script> <body> <div> <done-button></done-button> </div> <script> Vue.component('done-button', { template: '<button>{{text}}</button>', data: function (){ return { text: 'ok' } } }); var app1 = new Vue({ el: '#app1' }); </script>
不同于 new Vue({}) 中的实例数据集，组件中的 data 数据集必须是一个函数，再使用函数返回一个对象集，否则会报错；
4. 实例给组件传值：
<script src="https://www.jb51.net/public/javascripts/vue.js"></script> <body> <div> <done-button text="submit" textOne="submit1" text-two="submit2"></done-button> </div> <script> Vue.component('done-button', { template: '<button :data-text="text" :data-text-one="textOne" :data-text-two="textTwo">{{text}}</button>', props: ['text', 'textOne', 'textTwo'] }); var app1 = new Vue({ el: '#app1' }); </script>
props 定义的字符串数组中的值，可以像 data 数据集一样在组件内自由调用；
props 定义的字符串数组中的值，会作为组件标签中的标签属性名，给实例赋值；
受浏览器渲染标签属性的影响，标签属性的命名如果使用驼峰式，则使用时 vue 会自动生成对应的短横线隔开式属性名，如事例中的 text-two；
5. 组件标签属性使用动态数据：
<script src="https://www.jb51.net/public/javascripts/vue.js"></script> <style> .appNumber{background-color: red} </style> <body> <div> <done-button :number="appNumber"></done-button> <button @click="appNumber++">{{appNumber}}</button> </div> <script> Vue.component('done-button', { template: '<button @click="number++">{{number}}</button>', props: ['number'] }); new Vue({ el: '#app1', data: { appNumber: 0 } }); </script>
实例中的 appNumber 变化时，组件中的 number 会跟着变化；
组件中的 number 变化时，实例中的 appNumber 并不会变化；
实例中的 appNumber 的值，会覆盖组件内 number 的值；
但如果 appNumber 的值是数组或对象，由于是引用类型，则双方都会互相影响；
6. 自定义组件属性的值的规则：