vue中reject与provide使用

他的产生是为了多级嵌套子组件引用父组件的值！A中有B,B中有C,A给C数据与方法。
官网的说法

• 其实和props引用差不多，也可以声明默认值和类型 其绑定的不可监听，
• 如果传入可监听的对象，其属性也可监听！！

简单粗暴，看demo
test1.vue ------ 定义方法method和数据msg，

<template>
    <div class="test1">
        <son></son> 
    </div>
</template>
<script>
import son from '../components/Son.vue'
export default {
    name: 'test1',
    provide(){
        return{
            msg: this.helloMsg,
            method: this.somemethod,
        }
    },
    components: {
        son,
    },
    data(){
        return {
            helloMsg: {
                time: '2019-07',
                content: '你好'
            }
        }
    },
    methods: {
        somemethod(){
            this.helloMsg.time = '2019-07-10';
        }
    }
}
</script>

son.vue ------------ 引用数据，在data中赋值

<template>
    <div class="son">
        儿子---{{fromtest}}
        <grandson></grandson>
    </div>
</template>
<script>
import grandson from './Grandson.vue'
export default {
    inject: ['msg'],
    components: {
        grandson,
    },
    name: 'son',
    data(){
        return {
            fromtest: this.msg,
        }
    }
}
</script>

Grandson.vue ------------ 引用数据和运行方法

   <template>
    <div class="grandson">
        孙子--{{fromtest}}
    </div>
</template>
<script>
export default {
    name: 'grandson',
    inject: ['msg','method'],
    data(){
        return {
            fromtest: this.msg,
        }
    },
    mounted(){
        this.method();
    }
}
</script>

结果：

可以看到方法运行了，数据过去了
最后的话
在任意层级都能访问导致数据追踪比较困难，不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了，因此这个属性通常并不建议使用能用vuex的使用vuex，不能用的多传参几层，但是在做组件库开发时，不对vuex进行依赖，且不知道用户使用环境的情况下可以很好的使用

demo参考简书

补充

参考： vue3.x 的 provide/reject

注意， 我补充的都是官网内容，做了一些提炼，想要理解全面推荐 官网⇲ 查看
更于 2021年6月28日

provide 一些组件的实例 property 将不起作用

app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  provide: {
    todoLength: this.todos.length // 将会导致错误 `Cannot read property 'length' of undefined`
  },
  template: `
    ...
  `
})

需要将 provide 转换为返回对象的函数

provide() {
  return {
    todoLength: this.todos.length
  }
},

实际上，你可以将依赖注入看作是“long range props”，除了：

• 父组件不需要知道哪些子组件使用它 provide 的 property
• 子组件不需要知道 inject 的 property 来自哪里

响应式

如果想要reject得到的值是响应式的，那么可以通过传递一个 ref property 或 reactive 对象给 provide

app.component('todo-list', {
 // ...
 provide() {
   return {
     todoLength: Vue.computed(() => this.todos.length)
   }
 }
})

你想吃彩虹糖吗？我有长颈鹿，可以挤给你！