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

一般下我们子组件获取父组件传过来的的值得时候，我们是使用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();
        }

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

警告：只能向下传递！！！！！！！