vue3新特性讲解(抽空就写)

Provide / Inject

通常，当我们需要从父组件向子组件传递数据时，我们使用 [props]想象一下这样的结构：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。

对于这种情况，我们可以使用一对 provide 和 inject。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。

第一种写法:这是默认写法，绑定并不是响应式的
祖先组件
    provide:{
      name:'传递参数',            注意不能访问provide的实例的property。比如传递一个数组的长度，就会报错，建议用第二种
    }
子组件孙组件等等不管嵌套多少层都可以拿到
inject:['name'],


第二种写法:这种是响应式的
祖先组件
    provide(){
      return{
        list:Vue.computed(() => this.name.length) ,
        content:Vue.computed(() => this.content.length) ,
      }
    },
inject:['list','content'],