Home > Article > Web Front-end > Communication between peers of Vue.js components (code)

Communication between peers of Vue.js components (code)

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

This article introduces Vue.jsCommunication (code) between peers of components

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

The above is the detailed content of Communication between peers of Vue.js components (code). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of three string connection methods in JS and their performance comparisonNext article：Detailed explanation of three string connection methods in JS and their performance comparison

See more

Communication between peers of Vue.js components (code)

Related articles