vue3 依赖注入 optionsApi provide inject简单介绍

这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情

optionsApi provide inject的用法 (也是vue2的用法，vue3也可以兼容此种方式)

通常我们传递一个数据，从父组件到子组件我们通常用props，如果有嵌套很深的那种组件，需要我们把数据写到组件链当中，也就是透传，透传是一件很麻烦的事情，可以看一下透传代码

father.vue

 <template>
     <div></div>
     <child1 :name="name"></child1>
</template>
<script>
import child1 from './child1.vue'
export default {
   data: function() {
      return {
        name:'你好'
      } 
   },
   components: {
      child1
   }
}
</script>

child1模版

 <template>
     <div></div>
     <child2 :name="name"></child2>
</template>
<script>
import child2 from './child2.vue'
export default {
   props: { // 接收数据
      name: {
            type: String,
            default: "1"
      }
   }
   components: {
      child2
   }
}
</script>

child2模版

 <template>
     <div>{{name}}</div>
</template>
<script>
export default {
   props: {
      name: {
            type: String,
            default: "1"
      }
   }
   
}
</script>

遇到上面那种情况(数据需要传多级的情况)，需要把provide和inject 这一对拿出来使用，父组件可以作为数据的提供方，服务于所有子组件的,不管这个组件的体系有多深都可以使用，父组件提供一个provide去注册数据，子组件用inject去使用父组件的数据 大家看可以看用还是上面的那种组件层级，用provide和inject写是多简单 provide和inject版本 father.vue

 <template>
     <div></div>
     <child1 :name="name"></child1>
</template>
<script>
import child1 from './child1.vue'
export default {
   provide: {  // 这个既可以是对象，也可以是回调函数（建议用函数的方式)
      name:'你好'
   },
   data: function() {
      return {
        name:'你好'
      } 
   },
   components: {
      child1
   }
}
</script>

child1模版

 <template>
     <div></div>
     <child2></child2>
</template>
<script>
import child2 from './child2.vue'
export default {
   components: {
      child2
   }
}
</script>

child2模版

 <template>
     <div>{{name}}</div>
</template>
<script>
export default {
   inject: ['name'] //选择注入的数据
}
</script>

这是方式不是靠属性，靠的依赖注入的方式,父组件不需要知道谁用了，子组件不知道谁提供的能用就行 但是这种写法，有一种不是地方，就是没有了响应式， 用compositonApi的方式如果要是实现provide和inject相应数据比较麻烦，需要用到computed可以看下写法

father.vue

 <template>
     <div></div>
     <child1 :name="name"></child1>
</template>
<script>
import child1 from './child1.vue'
export default {
   provide: function() { // 需要写成函数形式 ，并且返回值也是函数
      retuen {
        name: ()=>this.name
      }
   },
   data: function() {
      return {
        name:'你好'
      } 
   },
   components: {
      child1
   }
}
</script>

child1模版

 <template>
     <div></div>
     <child2></child2>
</template>
<script>
import child2 from './child2.vue'
export default {
   components: {
      child2
   }
}
</script>

child2模版

 <template>
     <div>{{proname}}</div>
</template>
<script>
export default {
   inject: ['name'] //自组建注入的是一个函数 
   computed: { // 利用computed去执行注入过来的函数 这样就可以实现响应式了
    proname: function() {
        return this.name()
    }
  },
}
</script>

后面介绍compositonApi provide inject的用法