vue-cli中怎么实现组件通信-创新互联-内江站浩晨众云

新闻中心

这里有您想知道的互联网营销解决方案

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中怎么实现组件通信的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联成都网站设计公司行业资讯频道，感谢各位的阅读！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享名称：vue-cli中怎么实现组件通信-创新互联
转载注明：http://www.jxjierui.cn/article/dhogpo.html

新闻中心

其他资讯