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

vue 父组件向孙子组件传值除了用provide/inject的依赖注入的传值方法，还可以用$attrs

 

1. 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 ++

        },
    }
}

 

2. 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>

 

看上面👆child组件中，我们注释的几个props，props他主要分三个情况,我们可以打印出来看一下

1. 当child组件的props为[]时，$attrs会打印出所有的对象值
2. 当child组件的props为['name','age']时，$attrs会打印出除props里面属性值得对象
3. 当child组件的props为['title','name','hobby','age']时，当把所有的父组件传来的值都写到props的时候，$attrs会打印出空对象

 

3. childChild组件

点击parent父组件的add按钮的时候（增加年龄），孙子组件也是会响应的

<template>
    <div>
         <div>我是子组件的组件：{{$attrs}}</div>
         <div>主题：{{$attrs.title}}</div>
         <div>姓名：{{$attrs.name}}</div>
         <div>爱好：{{$attrs.hobby}}</div>
         <div>年龄：{{$attrs.age}}</div>
         
    </div>
</template>

 

4. 在孙子组件里改变父组件的值，$listeners

我们只需要现在子组件引入的组件上绑定一个

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

 

在孙子组件用就$emit方法

<template>
    <div>
         <div>我是子组件的组件：{{$attrs}}</div>
         <div>主题：{{$attrs.title}}</div>
         <div>姓名：{{$attrs.name}}</div>
         <div>爱好：{{$attrs.hobby}}</div>
         <div>年龄：{{$attrs.age}}</div>
          <button @click="childChildChangeName" >改名字</button>
    </div>
</template>
<script>
export default {
    inject:['newFoo'],
    methods:{
        childChildChangeName(){
            this.$emit('changeName','Lili')
        }
    }
}
</script>

 

父组件就可以直接修改值了

<template>
    <div>
        <button @click="add" >点击增加年龄</button>
        <child :title="title" :name='name' :hobby='hobby' :age='age' @changeName='changeName'/>
    </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 ++
        },
        changeName(val){
            this.name = val
        }
    }
}
</script>

 

 

5. $attrs还可以传函数