Heim > Artikel > Web-Frontend > Kommunikation zwischen Peers von Vue.js-Komponenten (Code)

Kommunikation zwischen Peers von Vue.js-Komponenten (Code)

高洛峰Original: 2017-03-12 11:32:211359Durchsuche

Dieser Artikel stellt die Kommunikation (den Code) zwischen Vue-Kollegen vor.js Komponenten

<!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>

Das obige ist der detaillierte Inhalt vonKommunikation zwischen Peers von Vue.js-Komponenten (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der drei String-Verbindungsmethoden in JS und deren LeistungsvergleichNächster Artikel：Detaillierte Erläuterung der drei String-Verbindungsmethoden in JS und deren Leistungsvergleich

In Verbindung stehende Artikel

Mehr sehen