<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://www.jb51.net/statics/vue.min.js"></script> </head> <body> <div> </div> <script> // 定义一个局部组件，其实就是一个变量，它是一个object类型 // 属性与全局组件是一样的 let Header = { template: ` <button @click="count++">{{ count }}</button> `, data() { return { count: 0 } } }; new Vue({ el: "#component-demo", // 第二种使用方式，不会将div渲染进DOM，以template为根元素 template: `<my-header></my-header>`, // 第二步，需要在根实例当中使用它 components: { 'my-header': Header } }); </script> </body> </html>
对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。
在局部组件中使用子组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://www.jb51.net/statics/vue.min.js"></script> <style> body { margin: 0; } .box { width: 100%; height: 50px; background-color: #2aabd2; } </style> </head> <body> <div> </div> <script> // 定义一个局部组件，其实就是一个变量，它是一个object类型 // 这个对象的属性与全局组件是一样的(除el属性外) let Fcontent = { template: ` <div> <span>这是头条</span> </div> ` }; let Header = { template: ` <div v-bind:class='{box: isBox}'> <button @click="count++">{{ count }}</button> <first-content></first-content> </div> `, data() { return { count: 0, isBox: true } }, components: { 'first-content': Fcontent } }; new Vue({ el: "#component-demo", // 第二种使用方式，不会将div渲染进DOM，以template为根元素 template: `<my-header></my-header>`, // 第二步，需要在根实例当中使用它 components: { 'my-header': Header } }); </script> </body> </html>
注:
1.注意写组件标签
2.每个组件的template只识别一个作用域块
通信
父子组件的通信
在父组件中给子组件绑定属性,子组件通过props=["属性名称"]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://www.jb51.net/statics/vue.min.js"></script> <style> body { margin: 0; } .box { width: 100%; height: 50px; background-color: #2aabd2; } </style> </head> <body> <div> </div> <script> // 定义一个局部组件，其实就是一个变量，它是一个object类型 // 属性与全局组件是一样的 let Fcontent = { template: ` <div> <span>这是头条</span> {{ fdata }} </div> `, props: ['fdata'] }; let Header = { template: ` <div v-bind:class='{box: isBox}'> <button @click="count++">{{ count }}</button> <first-content :fdata="fathData"></first-content> </div> `, data() { return { count: 0, isBox: true, fathData: "我是你爸爸~~~" } }, components: { 'first-content': Fcontent } }; new Vue({ el: "#component-demo", // 第二种使用方式，不会将div渲染进DOM，以template为根元素 template: `<my-header></my-header>`, // 第二步，需要在根实例当中使用它 components: { 'my-header': Header } }); </script> </body> </html>
子父组件的通信
父组件在mounted的时候，监听一个自定义事件。
给子组件绑定一个click事件之后，通过内建的方法$emit在父组件上触发一个事件，这个时间就是父组件监听的自定义事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://www.jb51.net/statics/vue.min.js"></script> <style> body { margin: 0; } .box { width: 100%; height: 50px; background-color: #2aabd2; } </style> </head> <body> <div> </div> <script> // 定义一个局部组件，其实就是一个变量，它是一个object类型 // 属性与全局组件是一样的 let Fcontent = { template: ` <div> <button v-on:click="myClick">放大父组件字体</button> </div> `, methods: { myClick: function () { console.log(this); this.$emit('change-font', 0.1); console.log(this); } } }; let Header = { template: ` <div v-bind:class='{box: isBox}'> <first-content v-on:change-font="changeFont"></first-content> <span :style="{ fontSize: postFontSize + 'em' }">Hello Vue</span> </div> `, data() { return { count: 0, isBox: true, fathData: "我是你爸爸~~~", postFontSize: 1 } }, components: { 'first-content': Fcontent }, methods: { changeFont: function (value) { this.postFontSize += value; } } }; const VM = new Vue({ el: "#component-demo", // 第二种使用方式，不会将div渲染进DOM，以template为根元素 template: `<my-header></my-header>`, // 第二步，需要在根实例当中使用它 components: { 'my-header': Header } }); </script> </body> </html>
非父子通信
其中一个组件向中间调度器提交事件,另一个组件监听中间调度器的事件
混入
混入可以提高代码的重用性。