从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触发事件类似。不同之处在于,这里可以多级html" target="_blank">嵌套,不一定是直接的父子组件都可以触发到。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍浅谈Vue父子组件和非父子组件传值问题,包括了浅谈Vue父子组件和非父子组件传值问题的使用技巧和注意事项,需要的朋友参考一下 本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue 2.在main.js中引入 import goodsList from 'goods/good
本文向大家介绍vue2.0父子组件及非父子组件之间的通信方法,包括了vue2.0父子组件及非父子组件之间的通信方法的使用技巧和注意事项,需要的朋友参考一下 1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数据. 2.子组件与父组件通信 那么,如果子组
本文向大家介绍浅谈JavaScript的事件,包括了浅谈JavaScript的事件的使用技巧和注意事项,需要的朋友参考一下 1、事件流 事件流描述的是从页面中接收事件的顺序。但是IE提出的是冒泡流,而Netscape Communicator提出的是捕获流。 JavaScript事件流 2、事件冒泡(event bubbling) 事件开始由最具体的元素(嵌套层次最深的那个节点)接
我有一个在父组件中生成的事件,子组件必须对此作出反应。我知道在中不建议使用这种方法,我必须执行emit,这非常糟糕。所以我的代码是这个。 正如您所看到的,在无限滚动上被触发,事件被发送到子组件搜索。不仅仅是搜索,因为它是根,所以它正在向每个人广播。 什么是更好的方法。我知道我应该使用道具,但我不知道在这种情况下我该怎么做。
本文向大家介绍Vue2.0学习之详解Vue 组件及父子组件通信,包括了Vue2.0学习之详解Vue 组件及父子组件通信的使用技巧和注意事项,需要的朋友参考一下 什么是组件? vue中的组件其实就是页面组成的一部分,好比是电脑中的每一个元件(如硬盘,键盘,鼠标),它就是一个具有独立逻辑或界面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用。 页面就是由一个个类似这样的部分组成的,比如导航
本文向大家介绍浅谈angularJS中的事件,包括了浅谈angularJS中的事件的使用技巧和注意事项,需要的朋友参考一下 什么是事件 •如同浏览器响应浏览器层的事件,比如鼠标点击、获得焦点,angular应用也可以响应angular事件 •angular事件系统并不与浏览器的事件系统相通,我们只能在作用域上监听angular事件而不是DOM事件 事件传播 因为作用域是有层次的,所以我们可以在作用