provide和reject,以及响应式变化如何实现

provide和reject,以及响应式变化如何实现

爷爷和孙子传值

方法一：通过父亲透穿

爷爷组件：通过‘  ：’ 即是v-bind传参

父亲组件： v-bind="$attrs" v-on="$listeners"

孙子组件：props

方法二：通过provide和reject(存在问题：爷爷更新了新的属性值，孙子拿到的还是旧的)

爷爷：

    provide() {
            return {
            subTitle: '全院',
        }
    },

孙子：

inject: ['subTitle'],

上述方法仅适用传的参是个常量，否则会出现：爷爷更新了新的属性值，孙子拿到的还是旧的这种问题。

改良方法：爷爷的provide是一个方法，并且指向data里的一个属性。

新爷爷：

    provide() {
        return {
            getCommonTitle: () => {
                return this.commonTitle,// 要提供的数据
            }
        }
    },
    data() {
        return {
            commonTitle:'全院',
        }
    },
    watch:{
        componentName:{
            handler(val){
                this.commonTitle = val.title //更新provide的值
            },
            immediate:true,
            deep:true
        }
    },

新孙子：保持和原来一致。

inject: ['getCommonTitle'],