vue小知识~使用$attrs和$listeners接收父组件转来的属性和方法

  • Post author:
  • Post category:vue


一般下我们子组件获取父组件传过来的的值得时候,我们是使用props来接收,但是如果我们父组件转过来的值是给孙组件使用时,使用哪个props接收的方式太过麻烦。

这是vue为我们提供了一个实例$attrs,表示该组件标签上的属性实例。




1,$attrs,该组件的实例标签上的属性


例如一个组件在父组件中进行渲染成标签时:

 <sona name="小智" age="18" sex="男"></sona>

怎$arrrs表示<sona/>标签上的

name=”小智” age=”18″ sex=”男”

属性的实例。

在子组件内只用用大括号表达式打印看:

他是一个对象,对象没包含了该组件标签的属性和值

我们只要将这个在传过去代孙子组件就可以了,无需在props内接收。

注意:


将inheritAttrs设置成false,


就不会将属性挂载该组件标签上。

传给孙子组件的时候,需要在儿子组件上使



用v-bind:



来实现传值(不能简写)。

<parentson v-bind="$attrs"></parentson>

孙子组件内打印效果:

  <div>孙子</div>
        孙子
        {{ $attrs}}
        <button @click="changp">改变</button>
        ........................
    </div>

页面效果:




2,$listeners:该组件上绑定的全部方法实例。


使用方式和$attrs一样,

a,在父组件内:

 <sona name="小智" age="18" sex="男" @gotoParentson="gotoParentson"></sona>

b,在子组件内



使用v-on



将方法绑定给孙子组件实例标签上

<parentson v-bind="$attrs" v-on="$listeners"></parentson>

c,孙子组件:

changp() {
   this.$listeners.gotoParentson();
        }

就可以调用父组件的方法啦!


警告:只能向下传递!!!!!!!



版权声明:本文为qq_31539817原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。