登录  /  注册
首页 > web前端 > js教程 > 正文

在vue-cli中如何实现组件通信

亚连
发布: 2018-06-20 15:15:22
原创
1602人浏览过

本篇文章主要介绍了在vue-cli中组件通信的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文介绍了在vue-cli中组件通信的方法,分享给大家。具体如下:

vue组件之间的通信包括三种:

1.父组件向子组件通信
2.子组件向父组件通信
3.同级组件之间的通信

一.父传子组件通信

拿app.vue当父组件,content.vue当子组件

1.父组件中导入子组件(子组件导出)

import contents from './components/content';
登录后复制

2.在父组件中注册子组件

  data() {
    return {
        test:'0'
    };
  },
  components:{
    'v-header':headers,
    'v-content':contents
  }
登录后复制

3.子组件通过props来接收数据

<v-content :childs=&#39;test&#39;></v-content>
登录后复制

二.子与父组件通信

子组件:

<template>
  <p @click="down()"></p>
</template>

methods: {
  down() {
    this.$emit(&#39;down&#39;,&#39;null&#39;); //主动触发down方法,&#39;null&#39;为向父组件传递的数据
  }
}
登录后复制

父组件:

<p>
  <child @down="changes" :test="test"></child> //监听子组件触发的down事件,然后调用changes方法
</p>
methods: {
  changes(msg) {
    this.test= test;
  }
}
登录后复制

二.非父子组件通信

//把a当作一个中转站
var a = new Vue();
登录后复制

组件1触发:

<p @click="eve"></p>
methods:{
  eve(){
  a.$emit("change",&#39;null&#39;)
 }
}
登录后复制

组件2接收:

<p></p>
created(){
  a.$on(&#39;change&#39;,()=>{
    this.msg = &#39;null&#39;
  })
}
登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在vue-cli中如何实现移动端自适应

在Vue 组件Toast中如何实现显示框效果

有关webpack中rules参数处理

在AngularJS中如何实现简单的计算

以上就是在vue-cli中如何实现组件通信的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号