vue的组件通讯
1.无任何关系的组件之前的通讯
1.1 简单情况下我们可以通过使用一个空的Vue实例作为中央事件总线，（这里也可以使用app实例，而不需要新建一个空Vue实例）
需要注意的是，调用方法放必须是在created生命周期中执行，这里可以理解为注册事件和调用事件
<!--main.js-->
let bus = new Vue ()
Vue.prototype.bus = bus组件A
<template>
<input type="button" value ="组件通讯" @click="communication">
</template>
<script >
export default{
data (){
return {
}
},
methods:{
communication(){
this.bus.$emit("commit" ,'这个A组价方法')
}
}
}
</script>组件B
<template>
<footer>{{text}}</footer>
</template>
<script>
data(){
text:""
},
created (){
this.bus.$on('commit',result=>{
this.text = result;
console.log(result);
});
}
</script>2.父子组件通讯
2.1 父子组件值传递
父组件
<template>
<son :prenMsg ="msg"><son>
</template>
<script>
import son from "./sonContainer.vue"
export default {
data(){
return {
msg : "这是父组件的值"
}
},
components : {
son
}
}
</script>子组件
<template>
<h3>读取到父组件的值为：{{msg}}</h3>
</template>
<script>
data (){
return {
msg : this.prenMsg
}
},
props : ["prenMsg"]
</script>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-04-18，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号