recherche

Maison >interface Web >js tutoriel >Communication entre pairs des composants Vue.js (code)

Communication entre pairs des composants Vue.js (code)

高洛峰
高洛峰original
2017-03-12 11:32:211378parcourir

Cet article présente la communication (code) entre pairs des composants 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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de trois méthodes de connexion de chaînes dans JS et comparaison de leurs performancesArticle suivant：Explication détaillée de trois méthodes de connexion de chaînes dans JS et comparaison de leurs performances

Articles Liés

Voir plus