四，父子组件间的通信
4.1，父传子 ：父传子的时候，通过属性传递
- 在子组件标签中，自定义属性和值
<Myheader ref="header" age="18" :sex="sex"></Myheader>
- 在子组件内部，通过props属性，获取所有的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> 大家好{{name}} <button @click="ouda">打一顿</button> <button @click="anwei">安慰</button> <button @click="xiaodao">看看导哥在干嘛</button> <Myheader ref="dawa"></Myheader> <Myheadererwa ref="erwa" age="2" :nengli="nengli2"></Myheadererwa> <div id="mydiv"></div> </div> </body> <script src="../js/vue2.7.js"></script> <script> Vue.prototype.$middleBus = new Vue(); var Myheader = { template:` <div> 子组件 {{xingming}}--{{Hp}} </div> `, data(){ return{ xingming:'林宇豪', Hp:100, } }, } var Myheadererwa = { template:` <div> 子组件 {{xingming}}--{{Hp}} <button @click="jiao">叫爷爷</button> 二娃 = {{age}} -- {{nengli}} </div> `, data(){ return{ xingming:'王导', Hp:0, } }, methods:{ see(){ console.log("再看岛国动作片"); }, jiao(){ this.$parent.name="爷爷" }, }, mounted(){ this.$middleBus.$on('jieshou',val=>{ // 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01 console.log(val); }); }, props:['age','nengli'], } var app = new Vue({ el:'#app', data(){ return{ name:'小豪', nengli2:"千里眼,顺风耳" } }, methods:{ ouda(){ console.log("孽子，打一顿"); this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10 // if(this.$refs.dawa.Hp<=0){ // document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹" // } }, anwei(){ console.log("抽了一巴掌，安慰了一下"); this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10 }, xiaodao(){ this.$refs.erwa.see() }, }, components:{ Myheader, Myheadererwa } }) </script> </html>
4.2，父组件监听自定义事件
<Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> 大家好{{changname}} <button @click="ouda">打一顿</button> <button @click="anwei">安慰</button> <button @click="xiaodao">看看导哥在干嘛</button> <Myheader ref="dawa"></Myheader> <Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa> <div id="mydiv"></div> </div> </body> <script src="../js/vue2.7.js"></script> <script> Vue.prototype.$middleBus = new Vue(); var Myheader = { template:` <div> 子组件 {{xingming}}--{{Hp}} <button @click="chuanzhi">发送一条信息</button> </div> `, data(){ return{ xingming:'林宇豪', Hp:100, } }, methods:{ chuanzhi(){ this.$middleBus.$emit('jieshou','你好child01,我是child02'); } } } var Myheadererwa = { template:` <div> 子组件 {{xingming}}--{{Hp}} <button @click="jiao">叫爷爷</button> <button @click="happyNewYear">给爷爷拜年</button> 二娃 = {{age}} -- {{nengli}} </div> `, data(){ return{ xingming:'王导', Hp:0, } }, methods:{ see(){ console.log("再看岛国动作片"); }, jiao(){ this.$parent.name="爷爷" }, happyNewYear(){ // 触发自定义事件 this.$emit('to-parent-event',this.xingming) } }, mounted(){ this.$middleBus.$on('jieshou',val=>{ // 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01 console.log(val); }); }, props:['age','nengli'], } var app = new Vue({ el:'#app', data(){ return{ changname:'小豪', nengli2:"千里眼,顺风耳" } }, methods:{ ouda(){ console.log("孽子，打一顿"); this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10 // if(this.$refs.dawa.Hp<=0){ // document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹" // } }, anwei(){ console.log("抽了一巴掌，安慰了一下"); this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10 }, xiaodao(){ this.$refs.erwa.see() }, bainian(xingming){ console.log(xingming+"给您拜年了 "); } }, components:{ Myheader, Myheadererwa } }) </script> </html>
五，非父子组件的通信
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> 大家好{{changname}} <button @click="ouda">打一顿</button> <button @click="anwei">安慰</button> <button @click="xiaodao">看看导哥在干嘛</button> <Myheader ref="dawa"></Myheader> <Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa> <div id="mydiv"></div> </div> </body> <script src="../js/vue2.7.js"></script> <script> Vue.prototype.$middleBus = new Vue(); var Myheader = { template:` <div> 子组件 {{xingming}}--{{Hp}} <button @click="chuanzhi">发送一条信息</button> </div> `, data(){ return{ xingming:'林宇豪', Hp:100, } }, methods:{ chuanzhi(){ this.$middleBus.$emit('jieshou','你好child01,我是child02'); } } } var Myheadererwa = { template:` <div> 子组件 {{xingming}}--{{Hp}} <button @click="jiao">叫爷爷</button> <button @click="happyNewYear">给爷爷拜年</button> 二娃 = {{age}} -- {{nengli}} </div> `, data(){ return{ xingming:'王导', Hp:0, } }, methods:{ see(){ console.log("再看岛国动作片"); }, jiao(){ this.$parent.name="爷爷" }, happyNewYear(){ // 触发自定义事件 this.$emit('to-parent-event',this.xingming) } }, mounted(){ this.$middleBus.$on('jieshou',val=>{ // 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01 console.log(val); }); }, props:['age','nengli'], } var app = new Vue({ el:'#app', data(){ return{ changname:'小豪', nengli2:"千里眼,顺风耳" } }, methods:{ ouda(){ console.log("孽子，打一顿"); this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10 // if(this.$refs.dawa.Hp<=0){ // document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹" // } }, anwei(){ console.log("抽了一巴掌，安慰了一下"); this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10 }, xiaodao(){ this.$refs.erwa.see() }, bainian(xingming){ console.log(xingming+"给您拜年了 "); } }, components:{ Myheader, Myheadererwa } }) </script> </html>
- 创建一个公共组件
Vue.prototype.$middleBus = new Vue();
- 发送方，在公共组件上，触发一个事件
this.$middleBus.$emit('sendMsg','你好child01,我是child02');
- 接收方，监听公共组件上的这个事件，并接受数据
this.$middleBus.$on('sendMsg',val=>{ // 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01 this.msg = val; });
六，混入（mixin）
- 定义
- 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项
- 写法
- 局部
- 定义个混入对象
var myMixin = { data() { return { mixinname: '混入姓名', }; }, mounted() { console.log('我是混入的组件'); }, };
- 项目
mixins: [myMixin],
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> 大家好{{changname}} <button @click="ouda">打一顿</button> <button @click="anwei">安慰</button> <button @click="xiaodao">看看导哥在干嘛</button> <Myheader ref="dawa"></Myheader> <Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa> <div id="mydiv"></div> </div> </body> <script src="../js/vue2.7.js"></script> <script> Vue.prototype.$middleBus = new Vue(); var commonMixin = { data(){ return{ mixinName:'葫芦' } }, mounted(){ console.log( "混入对象" +this.mixinName); } } var Myheader = { template:` <div> 子组件 {{xingming}}--{{Hp}}---{{mixinName}} <button @click="chuanzhi">发送一条信息</button> </div> `, data(){ return{ xingming:'林宇豪', Hp:100, } }, methods:{ chuanzhi(){ this.$middleBus.$emit('jieshou','你好child01,我是child02'); } }, mixins:[commonMixin] } var Myheadererwa = { template:` <div> 子组件 {{xingming}}--{{Hp}} <button @click="jiao">叫爷爷</button> <button @click="happyNewYear">给爷爷拜年</button> 二娃 = {{age}} -- {{nengli}} </div> `, data(){ return{ xingming:'王导', Hp:0, } }, methods:{ see(){ console.log("再看岛国动作片"); }, jiao(){ this.$parent.name="爷爷" }, happyNewYear(){ // 触发自定义事件 this.$emit('to-parent-event',this.xingming) } }, mounted(){ this.$middleBus.$on('jieshou',val=>{ // 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01 console.log(val); }); }, props:['age','nengli'], } var app = new Vue({ el:'#app', data(){ return{ changname:'小豪', nengli2:"千里眼,顺风耳" } }, methods:{ ouda(){ console.log("孽子，打一顿"); this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10 // if(this.$refs.dawa.Hp<=0){ // document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹" // } }, anwei(){ console.log("抽了一巴掌，安慰了一下"); this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10 }, xiaodao(){ this.$refs.erwa.see() }, bainian(xingming){ console.log(xingming+"给您拜年了 "); } }, components:{ Myheader, Myheadererwa } }) </script> </html>
全局混入
- 定义个混入对象
- 引入使用
Vue.mixin(myMixin);
注意
- 当组件和混入对象含有同名选项时，这些选项将进行“合并”
- 在选项发生冲突时以组件数据优先
- 请谨慎使用全局混入，因为会使实例以及每个组件受影响
最后
祝大家： 愿每个人都能遵循自己的时钟，做不后悔的选择。
