首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vue - 组件通信之$attrs、$listeners

还有一种通信方式,那就是 $attrs 和 $listeners,之前早就听说这两个api,趁着有空来补补。这种方式挺优雅,使用起来也不赖。下面例子都会通过父、子、孙子,三者的关系来说明使用方式。...$listeners 官方解释: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。...它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。 我的理解: 接收除了带有.native事件修饰符的所有事件监听器 图解: ?...同 attrs 属性一样,可以通过 v-on="$listeners",将事件监听器继续向下传递,让 grandson.vue 访问到事件,且可以使用 $emit 触发 parent.vue 的函数。...但要注意的是,继续绑定的事件和 $listeners 中的事件有重复时,不会被覆盖。

99310
您找到你想要的搜索结果了吗?
是的
没有找到

Vue中 $attrs、$listeners 详解及使用

子向父是通过 events($emit); 通过父链 / 子链也可以通信($parent / $children); ref 也可以访问组件实例; provide / inject; $attrs/$listeners...; 兄弟通信 Bus; Vuex; 跨级通信 Bus; Vuex; provide / inject、 $attrs / $listeners、 1....的出现解决的就是第一种情况的问题,B 组件在其中传递 props 以及事件的过程中,不必在写多余的代码, 仅仅是将 $attrs 以及 $listeners 向上或者向下传递即可。...属性,它是一个对象,里面包含了作用在这个组件上的所有监听器,你就可以配合 v-on=”listeners” 将所有的事件监听器指向这个组件的某个特定的子元素。...-- C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 --> <child2 v-bind="$attrs" v-on="$<em>listeners</em>

1.1K80

Vue 父子组件数据传递( inheritAttrs + $attrs + $listeners)

后来再逛社区的时候我又发现了还有第四种传递方式,inheritAttrs + $attrs + $listeners 附上原文链接Vue2.4版本中新添加的attrs以及listeners属性使用 和...在实践的采坑中体会更有意思 inheritAttrs + $attrs + $listeners inheritAttrs :默认是 true 我的解释就是:没有被子组件继承的父组件属性,不会当做特性展示在子组件根元素上面...$listeners 我的理解就是:子组件可以触发父组件的事件(不需要用什么那些麻烦的vuex或者一个空的 Vue 实例作为事件总线,或者又是什么vm.$on ) ?...它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。 最后一个总结 ? 后续补上例子

1.4K30
领券