Vue.js元件之同級之間的通訊（程式碼）-js教程-PHP中文網

Vue.js元件之同級之間的通訊（程式碼）

高洛峰

發布： 2017-03-12 11:32:21

原創

1355 人瀏覽過

這篇文章介紹Vue.js組件之同級之間的通訊（程式碼）

<!DOCTYPE html>
　　<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>componentKnowledge-同级组件通信</title>
　　　　<script src="js/vue.js"></script>
　　</head>
　　<body>

　　<template id="aa">
　　　　<p> 
　　　　　　I am aa component:{{msg}}
　　　　　　<input type="button" @click="send" value="SendTo-cc">
　　　　</p>
　　</template>

　　<template id="bb">
　　　　<p> 
　　　　　　I am bb component:{{msg}}
　　　　　　<input type="button" @click="send" value="SendTo-cc">
　　　　</p>
　　</template>

　　<template id="cc">
　　　　<p> 
　　　　　　<p>
　　　　　　I am cc component:{{msg}}/receive data:{{msg2}},{{msg3}}
　　　　　　</p>
　　　　</p>
　　</template>

　　<script>
　　window.onload=function(){
　　　　let Event=new Vue();
　　　　let aa={//定义组件
　　　　　　template:&#39;#aa&#39;,
　　　　　　data(){
　　　　　　　　return {msg:&#39;aa data&#39;}
　　　　　　},
　　　　　　methods:{ 
　　　　　　　　send(){
　　　　　　　　　　Event.$emit(&#39;a-send&#39;,this.msg)
　　　　　　　　}
　　　　　　}
　　　　};

　　　　let bb={//定义组件
　　　　　　template:&#39;#bb&#39;,
　　　　　　data(){
　　　　　　　　return {msg:&#39;bb data&#39;}
　　　　　　},
　　　　　　methods:{ 
　　　　　　　　send(){
　　　　　　　　Event.$emit(&#39;b-send&#39;,this.msg)
　　　　　　　　}
　　　　　　}
　　　　};

　　　　let cc={//定义组件
　　　　　　template:&#39;#cc&#39;,
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　msg:&#39;cc data&#39;,
　　　　　　　　　　msg2:&#39;&#39;,
　　　　　　　　　　msg3:&#39;&#39;
　　　　　　　　}
　　　　　　},
　　　　　　mounted(){
　　　　　　　　Event.$on(&#39;a-send&#39;,(data)=>{this.msg2=data});
　　　　　　　　Event.$on(&#39;b-send&#39;,(data)=>{this.msg3=data});
　　　　　　}
　　　　};
　　　　let vm=new Vue({
　　　　　　el:&#39;#app&#39;,
　　　　　　components:{//注册组件
　　　　　　　　aa,
　　　　　　　　bb,
　　　　　　　　cc
　　　　　　}
　　　　});
　　}
　　　　/*同级组件之间的通信关键总结：
　　　　　　1：新建一个空的root组件:let Event=new Vue();
　　　　　　　　其上有两个方法Event.$emit(&#39;a-fnName&#39;,data)/Event.$on(&#39;a-fnName&#39;,(data)=>{})
　　　　　　2:发送数据的组件：Event.$emit(&#39;a-fnName&#39;,data)写在组件的methods里，
　　　　　　3:接收数据的组件：Event.$on(&#39;a-fnName&#39;,(data)=>{}),注意函数格式必须写为箭头函数，不然this指向不是当前组件，一般写在钩子函数里(beforeCreate(){}/created(){}/beforeMount(){}/Mounted(){}/beforeUpdate(){}/updated(){}/beforeDestroy(){}/destroyed(){})
　　　　*/
　　</script>
　　　　<p id="app">
　　　　　　<!--使用组件-->
　　　　　　<aa></aa>
　　　　　　<bb></bb>
　　　　　　<cc></cc>
　　　　</p>
　　</body>
</html>

登入後複製

以上是Vue.js元件之同級之間的通訊（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！