vue中的provide/inject具体使用

隔了很长一段时间才更新。

因为这段时间换了个地方搬砖，事情比较多，需要熟悉公司的各个项目涉及到的业务和代码，所以才没更新。

从今天开始准备慢慢恢复更新，争取一周分享一篇自己学习的心得。新坑主要技术栈是以vue为主，所以分享的内容主要也是以vue为主。随着形势的发展，前端行业对于从业人员来说要求也会越来越高，我们只要不断的充实自己，才能让自己多一份御寒的能力。

闲话少叙，进入正题。

今天主要是要分享一下关于provide/inject的用法：

先看官网关于provide/inject的定义：

 

 

 简单的使用方式：

// app.vue
<script>
import Child from './Child.vue'

export default {
  components: { Child },
  provide() {
    return {
      //简单写法  
      message: 'hello1',
    }
  },
  methods:{
    handleClick() {
      this.message2 = 'message2 is change';
      console.log(this.message2)
    }
  }
}
</script>

<template>
  <Child />
  <button @click="handleClick">点我改变值</button>
</template>

// Child.vue
<script>
import GrandChild from './GrandChild.vue'

export default {
  components: {
    GrandChild
  }
}
</script>

<template>
  <GrandChild />
</template>
//GrandChild.vue
<script>
import GrandChild from './GrandChild.vue'

export default {
  // inject:['message', 'message2','message3'] 数组形式写法
  // 当声明注入的默认值时
  // 必须使用对象形式
  inject: {
    localMessage:{
      from:"message", // 如果与原注入属性名相同时，该属性是可选的
      default: ""
    },
    message2:{
      from:"message2",
    },
    message3:{
      from:"message3",
      default:"message default value" // 默认值写法
    }
  },
}
</script>

<template>
  <p>
    Message to grand child: {{ localMessage }}
    <br/>
    Message to grand child: {{ message2 }}
    <br/>
    Message to grand child: {{ message3 }}
  </p>
</template>
    

　　

数据响应式的使用方式：

该方式只需要修改一些提供依赖源即可，修改如下：

// app.vue
<script>
import { computed } from 'vue'
import Child from './Child.vue'

export default {
  components: { Child },
  data(){
    return {
      message2:"this is  message2"
    }
  },
  provide() {
    return {
      // 数据响应式写法
      message2: computed(() => this.message2)
    }
  },
  methods:{
    handleClick() {
      this.message2 = 'message2 is change';
      console.log(this.message2)
    }
  }
}
</script>

<template>
  <Child />
  <button @click="handleClick">点我改变值</button>
</template>　

总结：

provide和inject是配套使用的，provide在祖先组件或者应用根组件提供依赖源，该条组件链的组件都可以通过inject注入provide提供的值。可以用在祖先组件和后代组件的通信上面，避免使用props层层传递的麻烦。

当然，平时开发过程遇到祖先组件和后代组件通信的问题，可能更多的是采用vuex来解决。provide/inject使用较多的场景在高阶组件或者插件上面。