vue $attrs 父组件和孙子组件的传值，传函数

上一篇我们说到provide/inject的依赖注入的传值方法，今天我们来说一下另一个父组件给孙子组件的传值方式$attrs

我们接着上一个例子继续来写

parent父组件

我们给child子组件穿了四个属性值（title，name，hobby，age）

<template>
    <div>
        <button @click="add" >点击增加年龄</button>
        <child :title="title" :name='name' :hobby='hobby' :age='age'/>
    </div>
</template>
<script>
import child from '@/components/child'
export default {
    components:{child},
    data () {
        return {
            title:'自我介绍',
            name:'Tom',
            hobby:'like eat',
            age:4,
        }
    },
    methods:{
        add(){
            this.age ++

        },
    }
}
</script>

child子组件

child子组件使用props来接受，在child组件中引入childChild子组件，并使用v-bind将$attrs绑定在组件上，就可在childChild组件中使用props或$attrs接收,按此规律可一直传递。

$attrs打印出来是一个对象，所以我们可以在子组件直接取你想要的数据值{{$attrs.name}}

当然当你的props不是空数组的话，也可以直接用{{name}}

<template>
<section>
    <div>我是子组件：{{$attrs}}</div>
    <childChild v-bind="$attrs"/>
</section>
</template>
<script>
import childChild from '@/components/childChild'
export default {
    props:[],
    // props:['name','age'],
    //props:['title','name','hobby','age'],
    components:{
        childChild
    },

}
</script>

看上面