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>

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

　　　　1.  当child组件的props为[]时，$attrs会打印出所有的对象值

　　　　child组件中：props:[],

             

　　　　2. 当child组件的props为['name','age']时，$attrs会打印出除props里面属性值得对象

　　　　child组件中：props:['name','age'],

　　　　

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

　　　　child组件中：props:['title','name','hobby','age'],

　

　　

childChild组件

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

 

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

那当我们想现在在孙子组件里改变父组件的值，怎么办？$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>

 

 

$attrs可以传函数吗？

经过测试发现$attrs不仅可以传对应参数，也可以传函数，我们下面以之前的例子说明一下

还是之前的parent父组件， 我们给child组件上传了一个changeName函数，因为组件太多我们暂时就已一代二代来区分子组件

parent父组件

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

第一代组件

下面是我们的child第一代子组件,同时我们也相继的给第二代组件childChild上在传一个函数，后面继续试一下子组件相互修改值

<button @click="$attrs.changeName(data)">一代组件修改父组件值</button>
我们打印出$attrs看一下

<template>
<section>
    <div>我是一代子组件：{{$attrs.title}}</div>
    <div>一代活动名称:{{activity.name}}</div>
    <div>一代活动地点:{{activity.place}}</div>
    <childChild v-bind="$attrs" v-on="$listeners" :changePlace='val => activity.place = val'  />
    <button @click="$attrs.changeName(data)">一代组件修改父组件值</button>
</section>
</template>
<script>
export default {
    data () {
        return {
            data:'小明',
            activity:{
                name:'活动名称',
                date:'活动时间',
                place:'学校'
            },
        }
    },
    props:[],
    // props:['name','age'],
    // props:['title','name','hobby','age'],
    components:{childChild},
    created(){
         console.log(this.$attrs)
    },
    
}
</script>

我们可以看到我们直接在第一点组件中调用$attrs.changeName(),并在里面传了一个定义的data值，修改name为data的‘小明’，点击按钮确实是可以触发，并修改name值，name值作为$attrs传的值，也会一起响应触发修改所有

我们可以看一下页面，name值被修改成功，同时，所有的$attrs值都被重新挂载修改

所以我们也可以不通过$emit来修改父组件的值，可以把函数作为三参数传给$attrs

第二代组件

我们上面给第二代子组件上也传了一个函数，我们这次试一下第三代组件修改第二代组件得值，我们看一下打印出来的数据

我们传的changePlace(),也打印出来了

我们在第二代组件里面又传了一个第三代组件，同时我们也给第三代组件穿了一个函数

childChildChangeName（）是我们第三代组件将要执行的的反方法

<template>
    <div>
         <div>我是子组件的组件：{{$attrs}}</div>
         <div>主题：{{$attrs.title}}</div>
         <div>姓名：{{$attrs.name}}</div>
         <div>爱好：{{$attrs.hobby}}</div>
         <div>年龄：{{$attrs.age}}</div>
         <div>二代组件值：{{twoData}}</div>
        <threeChild v-bind="$attrs"  :changeTwoName='childChildChangeName'></threeChild>
    </div>
</template>
<script>
import threeChild from '@/components/threeChild'
export default {
    components:{threeChild},
    data () {
        return {
            twoData:'西游记'
        }
    },
    methods:{
        childChildChangeName(){
            this.$emit('changeTitle','重新自我介绍')
            this.twoData = '水浒传'
            this.$attrs.title = '安居客'//发现没有修改
        }
    }
}
</script>

第三代组件

这是我们第三代组件

我们可以回头看看第一代组件的页面

<childChild v-bind="$attrs" v-on="$listeners" :changePlace='val => activity.place = val'  />

<template>
    <section>
        <div>我是第三代组件：{{$attrs}}</div>
        <button @click="changeOne">三修改一代组件</button>
        <button @click="changeTwo">三修改二代组件</button>
    </section>
</template>
<script>
export default {
    methods:{
        changeOne(){
            this.$attrs.name='数据库打开'//发现不可以
            this.$attrs.changePlace('西校区')
        },
        changeTwo(){
            this.$attrs.changeTwoName()
        }    
    },
    mounted(){
    },
    created(){
         console.log('three',this.$attrs)
    },
}
</script>

我们点击按钮 one ，发现直接修改$attrs的属性值是不奏效的，在调取他的changePlace(),并传入修改的值
我们看一下修改后的页面，点击按钮确实触发了，

我们接着点击two按钮试一下，他调取的是第二组件的方法，第二组建的方法同时又用$emit，去触发了父组件的一个方法，同时也试着修改了该组件的$attrs值

我们可以看上面第二代组件的代码回顾一下

<threeChild v-bind="$attrs"  :changeTwoName='childChildChangeName'></threeChild>
具体方法是

childChildChangeName(){
            this.$emit('changeTitle','重新自我介绍')
            this.twoData = '水浒传'
            this.$attrs.title = '安居客'//发现没有修改
        }
修改的页面如下，我们发现除了直接修改$attrs的值不行，其他都可以，这说明要想修改$attrs的值，只能在传值的父组件中修改，其他的都不可以