十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
vue-cli中怎么实现组件通信,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
创新互联公司专注于仁寿企业网站建设,成都响应式网站建设公司,电子商务商城网站建设。仁寿网站建设公司,为仁寿等地区提供建站服务。全流程按需制作网站,专业设计,全程项目跟踪,创新互联公司专业和态度为您提供的服务
一.父传子组件通信

拿app.vue当父组件,content.vue当子组件
1.父组件中导入子组件(子组件导出)
import contents from './components/content';
2.在父组件中注册子组件
data() {
return {
test:'0'
};
},
components:{
'v-header':headers,
'v-content':contents
}3.子组件通过props来接收数据
二.子与父组件通信
子组件:
methods: {
down() {
this.$emit('down','null'); //主动触发down方法,'null'为向父组件传递的数据
}
}父组件:
methods: { changes(msg) { this.test= test; } }//监听子组件触发的down事件,然后调用changes方法
二.非父子组件通信
//把a当作一个中转站 var a = new Vue();
组件1触发:
methods:{
eve(){
a.$emit("change",'null')
}
}组件2接收:
created(){
a.$on('change',()=>{
this.msg = 'null'
})
}看完上述内容,你们掌握vue-cli中怎么实现组件通信的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!