浅谈Vue2.0父子组件间事件派发机制


Posted in Javascript onJanuary 08, 2018

从vue1.x过来的都知道,在vue2.0中,父子组件间事件通信的$dispatch和$broadcase被移除了。官方考虑是基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆落。特别是在组件层级比较深的情况下。通过广播和事件分发的机制,就显得比较混乱了。

官方在废除的同时,也为我们提供了替换方案,包括实例化一个空的vue实例,使用$emit反应子组件上的状态变化

1.使用$emit触发事件

helloWorld.vue作为父组件,dialogConfigVisible变量控制子组件弹框显示或隐藏。

configBox.vue作为子组件,假设为封装的公告弹窗。

在父组件中 helloWorld.vue 中

< template/>

<config-box
   :visible="dialogConfigVisible"        
   @listenToConfig="changeConfigVisible"
 > </config-box>

script

data(){
  return {
   dialogConfigVisible:true
  }
 }
  methods: {
   changeConfigVisible(flag) {
     this.dialogConfigVisible = flag;
   }
  }

然后,在子组件 configBox.vue 中,主要在任意事件回调中,使用 $emit来触发自定义的 listenToConfig事件,后面还可以加上参数传给父组件。比如,在子组件弹窗上点击×关闭时,通知父组件 helloWorld.vue我要关闭了,主要方便父组件改变相应状态变量,并传入false到自定义的事件中。

script

methods:{
 dialogClose() {
  this.show = false;
  this.$emit("listenToConfig", false)
 }
}

在子?件中,主动触发listenToConfig事件,并传入参数 false, 告诉父组件 helloWorld.vue对话框要关闭了。这里就可以避免父组件中的状态未变化,再次刷新页面的时候对话框会自动出现。

2.实例化一个空的vue实例bus

这里实例化一个bus 空vue实例,主要为了统一管理子组件和父组件相互通信,通过bus 作为媒介,首先新建一个bus.js 文件,在里面新建一个对象,父组件为table.vue, 子组件为tableColumn.vue

// bus.js
 import Vue from "vue";
 export var bus = new Vue({
   data:{
    scrollY:false
   },
   methods:{
    updateScrollY(flag){
     this.scrollY = flag;
    }
   }
  })

然后分别引入:

// table.vue
 <script>
 import {bus} from "./bus"
  export default {
   created(){
    bus.$on('getData',(argsData)=>{
     // 这里获取子组件传来的参数
     console.log(argsData);
     })

   }
  }

 </script>
// tableColumn.vue
 <script>
  import {bus} from "./bus"
  export default{
   methods(){
    handleClick(){
     bus.$emit('getData',{data:"from tableColumn!"})
    }
   }
  }
 </script>

上面的父子组件中,父组件中利用bus注册监听事件getData,子组件中一旦有状态变化,就触发bus上对应的事件。

这种利用空实例的方式,相当于创建了一个事件中心,所以这种通信同样适用于非父子组件间的通信,

3.多级父子组件通信

有时,可能想要实现通信的两个组件不是直接的父子组件,而是祖父和孙子,或者是跨越了更多层级的父子组件

不可能由子组件一级一级的向上传递参数,来达到通信的目的,虽然现在我们理解的通信都是这样经过中转的。可以通过while等循环,不断向上遍历,直到找到目标父组件,就在对应的组件上触发事件。

下面就只element-ui实现的一个父子组件通信的mixins,对于组件同步有很大的作用。在element-ui 的优点概述中也特意提到这个组件通信

function broadcast(componentName, eventName, params) {

 // 向下遍历每个子节点,触发相应的向下广播的 事件
 this.$children.forEach(child => {
  var name = child.$options.componentName;

  if (name === componentName) {
   child.$emit.apply(child, [eventName].concat(params));
  } else {
   broadcast.apply(child, [componentName, eventName].concat([params]));
  }
 });
}
export default {
 methods: {
   // 向上遍历父节点,来获取指定父节点,通过$emit 在相应的 组件中触发 eventName 事件
  dispatch(componentName, eventName, params) {
   var parent = this.$parent || this.$root;
   var name = parent.$options.componentName;
   // 上面的componentName 需要在每个vue 实例中额外配置自定义属性 componentName,
   //可以简单替换成var name = parent.$options._componentTag;

   while (parent && (!name || name !== componentName)) {
    parent = parent.$parent;

    if (parent) {
     name = parent.$options.componentName;
    }
   }
   if (parent) {
    parent.$emit.apply(parent, [eventName].concat(params));
   }
  },
  broadcast(componentName, eventName, params) {
   broadcast.call(this, componentName, eventName, params);
  }
 }
};

首先定义两个嵌套的组件 f1.vue 和 c1.vue,实例是:

<f1>
  <c1></c1>
 </f1>

然后,分别定义两个父子组件:

c2.vue

<template>
   <section>
   <button type="button" name="button" @click="dispatchTest">点击一下,就可以</button>
  </section>
 </template>
<script type="text/javascript">
import Emitter from "../mixins/emitter";
export default {
name: "c2",
mixins: [Emitter],
componentName:'c2',
methods: {
 dispatchTest() {
  this.dispatch('f1', 'listenerToC1', false);
 }
}
}
</script>

 f1.vue

<template type="html">
 <div class="outBox-class">
  <slot>
  </slot>
 </div>
</template>

<script type="text/javascript">
import Emitter from "../mixins/emitter";
export default {
name: "f1",
mixins: [Emitter],
componentName: 'f1',
mounted() {
 this.$on("listenerToC1", (value) => {
   alert(value);
 })
}
}
</script>

这样,就可以在子组件中点击按钮,触发 listenerToC1事件,在父组件中监听到这个事件,

其实更$emit触发事件类似。不同之处在于,这里可以多级嵌套,不一定是直接的父子组件都可以触发到。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript学习笔记4 Eval函数
Jan 11 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
javascript每日必学之多态
Feb 23 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 #jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 #jQuery
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 #Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 #jQuery
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 #Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 #jQuery
Angular 项目实现国际化的方法
Jan 08 #Javascript
You might like
PHP 金额数字转换成英文
2010/05/06 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
php流量统计功能的实现代码
2012/09/29 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
介绍Python中的一些高级编程技巧
2015/04/02 Python
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
四种会话跟踪技术
2015/05/20 面试题
成龙洗发水广告词
2014/03/14 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
校庆口号
2014/06/20 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
小区环境卫生倡议书
2015/04/29 职场文书