vue2中祖父组件和孙组件事件通信

1、使用 p a r e n t 属性访问祖父组件，并通过 parent属性访问祖父组件，并通过 parent属性访问祖父组件，并通过emit方法触发祖父组件的事件

this.$parent.$emit('event-name', data);

2、使用provide和inject方法，在祖父组件中提供一个方法或属性，孙组件中通过inject方法获取这个方法或属性，并在孙组件中调用该方法或属性来触发祖父组件

// 祖父组件中
provide() {return {trigger: this.trigger}
},
methods: {trigger(data) {// 处理数据}
}// 孙组件中
inject: ['trigger'],
methods: {handleClick() {this.trigger(data);}
}

3、使用事件总线，祖父组件中创建一个Vue实例作为事件总线，然后在祖父组件、父组件和孙组件中分别使用 e m i t 和 emit和 emit和on方法来进行事件的传递和监听。

// 祖父组件中
const eventBus = new Vue();// 父组件中
eventBus.$on('event-name', data => {// 处理数据
})
// 孙组件中
eventBus.$emit('event-name', data);

vue2中祖父组件和孙组件事件通信相关推荐

vue中用ref实现父子组件、孙组件、兄弟组件、非亲子孙组件互相调用的方法
无论是什么层级的组件之间互相调用,掌握好ref后都是万变不离其宗.来练练手吧 1.父子传: 父组件: <template><div><Button @click=&quo ...
vue 祖孙组件通信，祖组件获取孙组件数据
祖组件: <select-item selectFiled="tyreTreadWidth" :width="70" v-on:selected=&quo ...
vue2.0 非父子组件之间的单一事件通信
前言 vue官网指出: 通过使用事件中心,允许组件自由交流,无论组件处于组件树的哪一层.由于 Vue 实例实现了一个事件分发接口,你可以通过实例化一个空的 Vue 实例来实现这个目的. 也就是说非父 ...
vue2中component和components在组件注册和路由中的区别
组件注册中的component和components 全局注册用到component(单数) html: <div id="example"><my-compon ...
vue中如何优雅实现爷孙组件的数据通信($attrs/$listeners)
$attrs和 $listeners如何使用呢? $attrs是用来将数据从爷组件传递给孙组件的.(理解为之前的父传子) $listeners是用来从孙组件中触发爷组件中事件的.(理解为之前的子传父) ...
Vue 组件传值通信、父子组件、爷孙组件传值、方法调用
组件传:vue子组件改变父组件中data的值_mldwyy的博客-CSDN博客_子组件修改父组件data 参考 https://www.cnblogs.com/lianxisheng/p/109073 ...
vue学习（1）vue3/2下的父子/爷孙组件间方法调用
我这里只写父子/爷孙组件间方法调用(传值的那啥emit,on, eventbus我就不在这里写了) vue2中的写法爷组件控制孙组件的锚点跳转(父子组件间方法调用类似) // 孙组件 <tem ...
vue3跨组件传值（爷孙组件传值）
在父组件中通过provide来传递 provide('data':要传递的值) 在下面的子组件或孙组件中通过 let ecorData: any = inject("data"); ...
父子组件，父孙组件之间的通信 provide与inject
一.概念这对选项是一起使用的.以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. provide:是一个对象,或者是一个返回对象的函数.里面呢 ...

vue2中祖父组件和孙组件事件通信

vue2中祖父组件和孙组件事件通信相关推荐

最新文章

热门文章