<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>componentKnowledge-同级组件通信</title> <script src="js/vue.js"></script> </head> <body> <template id="aa"> <div> I am aa component:{ {msg}} <input type="button" @click="send" value="SendTo-cc"> </div> </template> <template id="bb"> <div> I am bb component:{ {msg}} <input type="button" @click="send" value="SendTo-cc"> </div> </template> <template id="cc"> <div> <div> I am cc component:{ {msg}}/receive data:{ {msg2}},{ {msg3}} </div> </div> </template> <script> window.οnlοad=function(){ let Event=new Vue();let aa={//定义组件
template:'#aa', data(){ return {msg:'aa data'} }, methods:{ send(){ Event.$emit('a-send',this.msg) } } }; let bb={//定义组件 template:'#bb', data(){ return {msg:'bb data'} }, methods:{ send(){ Event.$emit('b-send',this.msg) } } }; let cc={//定义组件 template:'#cc', data(){ return { msg:'cc data', msg2:'', msg3:'' } }, mounted(){ Event.$on('a-send',(data)=>{this.msg2=data}); Event.$on('b-send',(data)=>{this.msg3=data}); } };let vm=new Vue({
el:'#app', components:{//注册组件 aa, bb, cc } }); } /*同级组件之间的通信关键总结： 1：新建一个空的root组件:let Event=new Vue(); 其上有两个方法Event.$emit('a-fnName',data)/Event.$on('a-fnName',(data)=>{}) 2:发送数据的组件：Event.$emit('a-fnName',data)写在组件的methods里， 3:接收数据的组件：Event.$on('a-fnName',(data)=>{}),注意函数格式必须写为箭头函数，不然this指向不是当前组件，一般写在钩子函数里(beforeCreate(){}/created(){}/beforeMount(){}/Mounted(){}/beforeUpdate(){}/updated(){}/beforeDestroy(){}/destroyed(){})*/
</script> <div id="app"><!--使用组件-->
<aa></aa> <bb></bb> <cc></cc> </div> </body></html>
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>componentParentChildCommunication</title> <script src="js/vue.js"></script> </head> <template id="parentComp"> <div> I am parent component:{ {msg}},The Data from child:{ {msg2}} <hr> <!-- <child @自定义事件名="父方法"></child> --> <child @child="parentFn"></child> </div> </template><template id="childComp">
<div>I am child component:{ {msg}}</div> </template> <body> <script> let child={ template:'#childComp', data(){ return { msg:'child Data' } }, mounted(){ /*this.$emit('自定义事件名',数据);*/ this.$emit('child',this.msg); } }; let parent={ template:'#parentComp', data(){ return { msg:'parent Data', msg2:'' } }, components:{ child }, methods:{ parentFn(data){ this.msg2=data; } } }; window.οnlοad=function(){ new Vue({ el:'#app', components:{ parent } }); } /*父元素向子元素通信关键总结： 1：在嵌套的子元素(使用时)上：<child @自定义事件名="父方法"></child>; 2：子元素在加载完成的钩子函数（mounted）上加一个方法:this.$emit('自定义事件名',数据); 3：父元素上的方法:父方法名(data){...} */ </script> <div id="app"> <parent></parent> </div> </body></html>
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>componentChildToParentCommunication</title> <script src="js/vue.js"></script> </head> <template id="parentComp"> <div> I am parent component:{ {msg}},The Data from child:{ {msg1}},{ {msg2}} <hr> <child :m1="msg1" :m2="msg2"></child> </div> </template><template id="childComp">
<div>I am child component:{ {msg}}</div> </template> <body> <script> let child={ template:'#childComp', data(){ return { msg:'child Data' } }, props:['m1','m2'] }; let parent={ template:'#parentComp', data(){ return { mgs:'parent Data', msg1:'the first parent Data', msg2:'the second parent Data' } }, components:{ child }, }; window.οnlοad=function(){ new Vue({ el:'#app', components:{ parent } }); } /*子元素向父元素通信关键总结： 1：子元素定义时props:['msg1','msg2','msg3',...],用来放置从父元素拿过来的数据 2：在嵌套的子元素(使用时)上：<child :msg1="父数据1" :msg2="父数据2" :msg3="父数据3"></child>; */ </script> <div id="app"> <parent></parent> </div> </body></html>