概述
组件 (Component) 是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。是可复用的Vue实例。
组件注册
1 全局注册
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <global_com></global_com> <global_com></global_com> <global_com></global_com> </div> <div id="app1"> <global_com></global_com> </div> <script src="vue.js"></script> <script> // 全局注册， 第一个是组件名，第二个参数是个对象 Vue.component("global_com", { template: `<div><h1>{{global_data}}</h1></div>`, data(){ return{ global_data:"全局注册测试" } } }); const app = new Vue({ el: "#app" }); const app1 = new Vue({ el: "#app1" }) </script> </body> </html>
2 局部注册
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <my_com_name></my_com_name> </div> <!--局部注册到了app下，所以下面的app1没有--> <!--<div id="app1">--> <!--<my_com_name></my_com_name>--> <!--</div>--> <script src="vue.js"></script> <script> let my_com = { template:`<div><h1>{{my_data}}</h1></div>`, data(){ return { my_data: "局部注册测试" } } }; const app = new Vue({ el: "#app", components:{ my_com_name:my_com } }); const app1 = new Vue({ el: "#app1", }) </script> </body> </html>
3 父子组件的应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <parent></parent> </div> <script src="vue.js"></script> <script> let child = { template: `<div><h2>{{name}}</h2></div>`, data(){ return { name: "子组件" } } }; let parent = { // 注意下面的模板中子组件要写在模板中 template:`<div> <h1>{{name}}</h1> <child></child> </div>`, data(){ return { name: "父组件" } }, components:{ child: child // 子组件注册在父组件中 } }; const app = new Vue({ el: "#app", components: { parent: parent } }) </script> </body> </html>
组件间的传值
1 父组件向子组件传值
关键点：父组件在自己模板中的子组件的标签中绑定一个属性，然后在子组件中使用props接收
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <parent></parent> </div> <script src="vue.js"></script> <script> let child = { template: `<div> <h2>{{name}}</h2> <h3>父亲传过来的值：{{communication}}</h3> </div>`, data(){ return { name: "子组件" } }, props: ["communication"] }; let parent = { template:`<div> <h1>{{name}}</h1> <child :communication="communication"></child> </div>`, data(){ return { name: "父组件", communication: "爸爸给儿子说的话" } }, components:{ child: child } }; const app = new Vue({ el: "#app", components: { parent: parent } }) </script> </body> </html>
2 子组件向父组件传值
关键点：子组件通过自己的,即this.$emit("事件名称"，数据)，提交一个事件；父组件在自己模板中的子组件标签中@"事件名称"="自己处理的事件"，来监听该事件，再用自己的方法处理事件以及数据；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <parent></parent> </div> <script src="vue.js"></script> <script> let child = { template: `<div> <h2>{{name}}</h2> <button @click="click_event">点我发消息</button> </div>`, data(){ return { name: "子组件", son_msg: "我给爸爸发的消息！" } }, methods: { click_event: function () { this.$emit("send_msg_event", this.son_msg) } } }; let parent = { template:`<div> <h1>{{name}}</h1> <child @send_msg_event="parent_method"></child> <p>儿子发过来的消息：{{son_msg}}</p> <p>{{num}}</p> </div>`, data(){ return { name: "父组件", num:"", son_msg:"" } }, components:{ child: child }, methods:{ parent_method: function (data) { this.num ++; this.son_msg = data } } }; const app = new Vue({ el: "#app", components: { parent: parent } }) </script> </body> </html>
3 非父子组件之间的传值
关键点：使用中间人组为中介middle_Event = new Vue();提交事件使用middle_Event.$emit()，父组件使用middle_Event.$on()监听提交的事件，注意this
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ color: red; } </style> </head> <body> <div id="app"> <com1></com1> <com2></com2> </div> <script src="vue.js"></script> <script> middle_Event = new Vue(); let com1 = { template:`<div> <h1>{{name}}</h1> <button @click="click_com1">点我通信</button> </div>`, data(){ return { name: "com1", say_data: "com1说的话" } }, methods: { click_com1: function () { middle_Event.$emit("com1_say", this.say_data) } } }; let com2 = { template:`<div> <h1>{{name}}</h1> <p>com2中接收的com1发过来的值：<span :class="{active: is_show}">{{com1_send_msg}}</span></p> </div>`, data(){ return { name: "com2", com1_send_msg: "", is_show : true } }, mounted(){ console.log(this); // 这个this是app这个Vue对象 let _this = this; middle_Event.$on("com1_say", function (data) { console.log(this); // 这个this是middle_Event这个Vue对象 _this.com1_send_msg = data }) } }; const app = new Vue({ el: "#app", components: { com1: com1, com2: com2 } }) </script> </body> </html>
混合Mixins
重复功能和数据的储存器，自己的可以覆盖Mixins的内容。
不同组件的相同的部分提出去，使用mixins，优化我们的代码；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <com1></com1> <com2></com2> </div> <script src="vue.js"></script> <script> let same = { data(){ return { is_show: true } }, methods: { show_or_hide: function () { this.is_show = ! this.is_show } } }; let com1 = { template: `<div> <p v-show="is_show">哈哈哈哈哈1</p> <button @click="show_or_hide">点我显示隐藏1</button> </div>`, mixins: [same], }; let com2 = { template: `<div> <p v-show="is_show">哈哈哈哈哈2</p> <button @click="show_or_hide">点我显示隐藏2</button> </div>`, mixins: [same], // 如果自己有，就用自己的，自己没有 就用mixins中的 data(){ return { is_show: false } } }; const app = new Vue({ el: "#app", components: { com1: com1, com2: com2 } }) </script> </body> </html>
插槽slot
插槽是一套内容分发的API，在组件中，<slot>作为内容承载分发的出口；
相似的的组件中不同之处的地方使用插槽自定义；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--<com1><h2>asdasf</h2></com1>--> <!-- 插不了数据--> <com1> <div slot="my_slot"> <h3>使用插槽擦插入数据1</h3> <h4>使用插槽擦插入数据1.1</h4> </div> </com1> <com1> <h3 slot="my_slot">使用插槽擦插入数据2</h3> <h4 slot="my_slot">使用插槽擦插入数据2.1</h4> <h4 slot="my_slot1">使用插槽1擦插入数据</h4> </com1> </div> <script src="vue.js"></script> <script> let com1 = { template: `<div> <h2>原来的数据</h2> <slot name="my_slot"></slot> <slot name="my_slot1"></slot> </div>` }; const app = new Vue({ el: "#app", components: { com1: com1 } }) </script> </body> </html>