Vue.js组件之同级之间的通信（代码）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue.js组件之同级之间的通信（代码），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1637字，纯文字阅读大概需要3分钟。
内容图文
这篇文章介绍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:'#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>
<p id="app">
<!--使用组件-->
<aa></aa>
<bb></bb>
<cc></cc>
</p>
</body>
</html>以上就是Vue.js组件之同级之间的通信（代码）的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的Vue.js组件之同级之间的通信（代码）全部内容，希望文章能够帮你解决Vue.js组件之同级之间的通信（代码）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】