vue-cli中怎么实现组件通信

vue-cli中怎么实现组件通信,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

创新互联公司专注于仁寿企业网站建设,成都响应式网站建设公司,电子商务商城网站建设。仁寿网站建设公司,为仁寿等地区提供建站服务。全流程按需制作网站,专业设计,全程项目跟踪,创新互联公司专业和态度为您提供的服务

一.父传子组件通信

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'为向父组件传递的数据
  }
}

父组件:

   //监听子组件触发的down事件,然后调用changes方法
methods: {   changes(msg) {     this.test= test;   } }

二.非父子组件通信

//把a当作一个中转站
var a = new Vue();

组件1触发:

methods:{   eve(){   a.$emit("change",'null')  } }

组件2接收:

created(){   a.$on('change',()=>{     this.msg = 'null'   }) }

看完上述内容,你们掌握vue-cli中怎么实现组件通信的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


当前标题:vue-cli中怎么实现组件通信
本文URL:http://hxwzsj.com/article/ppepep.html

其他资讯

Copyright © 2025 青羊区翔捷宏鑫字牌设计制作工作室(个体工商户) All Rights Reserved 蜀ICP备2025123194号-14
友情链接: 重庆手机网站建设 H5网站制作 专业网站设计 企业网站设计 成都网站建设 手机网站制作设计 营销型网站建设 移动手机网站制作 重庆网站建设 成都网站建设推广 网站制作 上市集团网站建设 成都网站设计公司 成都网站设计 响应式网站设计 营销网站建设 成都网站建设公司 成都网站设计 网站制作报价 成都网站建设 网站制作 重庆网站制作