正文
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>
看上面
