vue $attrs $listeners 实现组件传值

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue $attrs $listeners 实现组件传值相关的知识,希望对你有一定的参考价值。

参考技术A

比如我们有个组件需要直接在父组件上设置子组件的属性比如下面:

我们可以到input上绑定$attrs获取到type和placeholder

然后我们来试试给props传递一个参数。

可以看到 $attrs 中 prop 不能被识别

继续子组件调用父组件的方法

首先要确保用v-on传递

我们可以看到 由于我们给type="text"的组件绑定了父组件的方法@listener1="fn1"
所有控制台只打印了fn1,
然后我们点击label,执行父组件的方法,改变value的值;

成功把input框中的内容改变。

传送门: https://segmentfault.com/a/1190000019208626

以上是关于vue $attrs $listeners 实现组件传值的主要内容,如果未能解决你的问题,请参考以下文章

vue-$attrs和$listeners

Vue 警告 $listeners 和 $attrs 是只读的

vue中$attrs $listeners你会用吗?

Vue 组件通信之$attrs$listeners

Vue2.x $attrs和$listeners

Vue2.x $attrs和$listeners