vue中的$emit 与$on父子组件与兄弟组件的之间通信方式


Posted in Javascript onMay 13, 2018

本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输.

主要的传输方式有三种:

1.父组件到子组件通信

2.子组件到父组件的通信

3.兄弟组件之间的通信

一、父组件传值给子组件

父组件给子组件传子,使用props

//父组件:parent.vue
<template>
  <div>
    <child :vals = "msg"></child>
  </div>
</template>
<script>
import child from "./child";
export default {
  data(){
    return {
      msg:"我是父组件的数据,将传给子组件"
    }
  },
  components:{
    child
  }
}
</script>

//子组件:child.vue
<template>
  <div>
    {{vals}}
  </div>
</template>
<script>
export default {
   props:{ //父组件传值 可以是一个数组,对象
    vals:{
      type:String,//类型为字符窜
     default:"123" //可以设置默认值
    }
  },
}
</script>

2.子组件到父组件的通信

使用 $emit(eventname,option) 触发事件,

参数一:自定义事件名称,写法,小写或者用-连接,如event,event-name 不能写驼峰写法(eventName)

子组件给父组件传值,可以在子组件中使用$emit触发事件的值传出去,父组件通过事件监听,获取数据

但是,这里有一个问题,

1、究竟是由子组件内部主动传数据给父组件,由父组件监听接收(由子组件中操作决定什么时候传值)

2、还是通过父组件决定子组件什么时候传值给父组件,然后再监听接收 (由父组件中操作决定什么时候传值)

两种情况都有

2.1 : $meit事件触发,通过子组件内部的事件触发自定义事件$emit

2.2 : $meit事件触发, 可以通过父组件操作子组件 (ref)的事件来触发 自定义事件$emit

第一种情况:

//父组件:parent.vue
<template>
  <div>
    <child v-on:childevent='wathChildEvent'></child>
    <div>子组件的数据为:{{msg}}</div>
  </div>
</template>
<script>
import child from "./child";
export default {
  data(){
    return{
      msg:""
    }
  },
  components:{
    child
  },
  methods:{
    wathChildEvent:function(vals){//直接监听 又子组件触发的事件,参数为子组件的传来的数据
      console.log(vals);//结果:这是子组件的数据,将有子组件操作触发传给父组件
      this.msg = vlas;
    } 
  }
}
</script>
//子组件:child.vue
<template>
  <div>
    <input type="button" value="子组件触发" @click="target">
  </div>
</template>
<script>
export default {
  data(){
      return {
      texts:'这是子组件的数据,将有子组件操作触发传给父组件'
      }
  },
  methods:{
    target:function(){ //有子组件的事件触发 自定义事件childevent
      this.$emit('childevent',this.texts);//触发一个在子组件中声明的事件 childEvnet
    }
  },
}
</script>

第二种情况:

//父组件:parent.vue
<template>
  <div>
    <child v-on:childevent='wathChildEvent' ref="childcomp"></child>
    <input type="button" @click="parentEnvet" value="父组件触发" />
    <div>子组件的数据为:{{msg}}</div>
  </div>
</template>
<script>
import child from "./child";
export default {
  data(){
    return{
      msg:""
    }
  },
  components:{
    child
  },
  methods:{
    wathChildEvent:function(vals){//直接监听 又子组件触发的事件,参数为子组件的传来的数据
      console.log(vals);//这是子组件的数据,将有子组件操作触发传给父组件
      this.msg = vlas;
    },
    parentEnvet:function(){
      this.$refs['childcomp'].target(); //通过refs属性获取子组件实例,又父组件操作子组件的方法触发事件$meit
    }
  }
}
</script>
//子组件:child.vue
<template>
  <div>
   <!-- dothing..... -->
  </div>
</template>
<script>
export default {
  data(){
      return {
      texts:'这是子组件的数据,将有子组件操作触发传给父组件'
      }
  },
  methods:{
    target:function(){ //又子组件的事件触发 自定义事件childevent
      this.$emit('childevent',this.texts);//触发一个在子组件中声明的事件 childEvnet
    }
  },
}
</script>

将两者情况对比,区别就在于$emit 自定义事件的触发是有父组件还是子组件去触发

第一种,是在子组件中定义一个click点击事件来触发自定义事件$emit,然后在父组件监听

第二种,是在父组件中第一一个click点击事件,在组件中通过refs获取实例方法来直接触发事件,然后在父组件中监听

3.兄弟组件之间的通信

 (1)、兄弟之间传递数据通过事件

 (2)、创建一个新Vue的实例,让各个兄弟共用同一个事件机制。(关键点)

 (3)、传递数据方,通过事件触发$emit(方法名,传递的数据)。

 (4)、接收数据方,在mounted()钩子函数(挂载实例)中 触发事件$on(方法名,callback(接收数据的数据)),此时callback函数中的this已经发生了改变,可以使用箭头函数。

//建立一个空的Vue实例,将通信事件挂载在该实例上
//emptyVue.js
import Vue from 'vue'
export default new Vue()
//兄弟组件a:childa.vue
<template>
  <div>
    <span>A组件->{{msg}}</span>
    <input type="button" value="把a组件数据传给b" @click ="send">
  </div>
</template>
<script>
import vmson from "./emptyVue"
export default {
  data(){
    return {
      msg:"我是a组件的数据"
    }
  },
  methods:{
    send:function(){
      vmson.$emit("aevent",this.msg)
    }
  }
}
</script>
//兄弟组件b:childb.vue
<template>
   <div>
    <span>b组件,a传的的数据为->{{msg}}</span>
  </div>
</template>
<script>
import vmson from "./emptyVue"
export default {
 data(){
    return {
      msg:""
    }
  },
  mounted(){
    vmson.$on("aevent",(val)=>{//监听事件aevent,回调函数要使用箭头函数;
      console.log(val);//打印结果:我是a组件的数据
      this.msg = val;
    })
  }
}
</script>
//父组件:parent.vue
<template>
  <div>
    <childa><childa>
    <childb></childb>
  </div>
</template>
<script>
import childa from "./childa";
import childb from "./childb";
export default {
  data(){
    return{
      msg:""
    }
  },
  components:{
    childa,
    childb
  },
}
</script>

到此,vue中的组件通信传值基本可以搞定了,但是对于大型复杂的项目,建议采用vuex 状态管理更适合....

推荐参考学习:https://vuex.vuejs.org/zh-cn/

    https://cn.vuejs.org/v2/api/#vm-emit

   https://cn.vuejs.org/v2/api/#vm-on

总结

以上所述是小编给大家介绍的vue中的$emit 与$on父子组件与兄弟组件的之间通信方式,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
js几秒以后倒计时跳转示例
Dec 26 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
react路由配置方式详解
Aug 07 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
vue中可编辑树状表格的实现代码
Oct 31 Javascript
node 命令方式启动修改端口的方法
May 12 #Javascript
安装Node.js并启动本地服务的操作教程
May 12 #Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 #Javascript
Vue拖拽组件开发实例详解
May 11 #Javascript
node前端模板引擎Jade之标签的基本写法
May 11 #Javascript
JS实现的简单下拉框联动功能示例
May 11 #Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 #Javascript
You might like
ZF等常用php框架中存在的问题
2008/01/10 PHP
php学习之变量的使用
2011/05/29 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
JS request函数 用来获取url参数
2010/05/17 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
Python二分法搜索算法实例分析
2015/05/11 Python
Python正规则表达式学习指南
2016/08/02 Python
python虚拟环境迁移方法
2019/01/03 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
环境工程专业个人求职信
2013/12/05 职场文书
学校安全防火方案
2014/06/07 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
JavaScript实现简单的音乐播放器
2022/08/14 Javascript