1、provide与inject的功能
 
通过provide与inject，可以把一个祖先组件指定的数据和方法，传递给其所有子孙后代
 
 
 
provide 和 inject 主要在开发高阶插件/组件库时使用
 
 
2、使用示例
 
3个组件 A(父级)、B(子级)、C(孙子级)
 
父组件A ---- 通过provide指定传递给子孙组件的值
 
export default {
  provide() {     // provide是一个匿名函数，返回一个对象
    return {
      reload: this.reload，
      msg:this.msg      
    };
  },
  data(){
    return {
      msg:'hello world!' 
   }
  },
  methods: {
    reload() {
      console.log("C调用A的方法！");
    },
  },
},
 
子/孙组件 ---- 通过inject 获取祖先组件传递过来的值
 
export default {
 //inject: ["reload","msg"],   简写
  inject:{                  // 详细指定来源以及默认值
     msg:{
        from:'A',   //表示从组件A传递过来的
        default:'a default msg'
     },
     reload:{
        from:'A'
     }
  },
  mounted() {
    this.reload();
  },
},
 
参考链接：https://cn.vuejs.org/v2/api/#provide-inject

 
了解Vue 3的provide和inject用法
 
前言
在组合式API中的用法
基本用法
 

 
前言
 
provide和inject在Vue 2中已经被广泛应用，不是新鲜API，3.0重新认识一下它们两个。
 
一句话介绍：provide可以向所有子孙组件提供数据以及提供修改数据的方法，子孙组件用inject使用数据。
 
在组合式API中的用法
 
基本用法
 
似乎，组合式API的provide没有提供批量方法， 只能每个变量写一句。
 
顶级组件：
 
<template>
  <div>
    <son />
  </div>
</template>

<script setup>
import son from "./son.vue";
import { provide } from "vue";
provide("abc", "123");
</script>
 
子组件：
 
<template>
  <div>
    <grandson />
  </div>
</template>

<script setup>
import grandson from "./grandson.vue";
</script>
 
孙组件：
 
<template>
  <div>我是孙子</div>
</template>

<script setup>
import { inject } from "vue";
const abc = inject("abc");
console.log(abc);
</script>
 
官方说：
 
 
 
inject() can only be used inside setup() or functional components.
 
 
这个意思是说，inject()只能放在setup()生命周期里运行，不能放在别的周期里运行，也不能放在事件周期里运行。所以你可以先在setup()周期取值。
 
例一：这是允许的，因为console.log是setup()生命周期里的同步代码
 
function xx() {
  console.log(inject("abc"))
}
xx()
 
例二：这是禁止的，因为setTimeout是异步函数，执行console.log(inject(“abc”))的时候已经不在setup()生命周期里。
 
function xx() {
  setTimeout(() => {
    console.log(inject("abc"))
  })
}
xx()
 
例三：让例一的xx函数作为鼠标事件回调，也是禁止的，原因也一样。
 
例四：放在Promise.then()也是禁止的，比如
 
Promise.resolve().then(() => {
  console.log(inject("abc"))
})

 
 
主要使用来沟通上下文，比如父——子——子1——子2，父组件和子2组件间的通信，不使用这方法也能解决的方式还有两种
 
 
props $emit 一层一层的传 弊端：写着太麻烦
vuex 用多了性能就不太行了
 
 
进入正题
 
官方文档上只提供了传递值的方式，没有提供子组件去跨级改父级组件的值，但是可以换一种写法就可以了，直接代码
 
代码结构： 父组件——child组件——son组件
 
父组件
 
<template>
  <div class="text">盒子 {{state.name}}</div>
  <div class="box">
   <Child/>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, provide } from 'vue'
import Child from './components/child.vue'
export default defineComponent({
  components:{
    Child
  },
  setup() {

    const state: any = reactive({
      name: 'zlz',
      age: 24
    })

    const update = (key: string, val: any): void => {
      state[key] = val
    }

    provide('ref2', {
      val: state,  // val需要传递的值
      update // 更新传递的值的方法
    })
    return {
      state
    }
  }
})
</script>

ps:当然也可以换一种写法 这一种写法要简便一点 但是语义化更弱
const state: any = reactive({
  name: 'zlz',
  age: 24,
  update // 更新state的方法
})

provide('ref2', state)
 
child组件
 
<template>
  <div class="box">
    <div class="box">child组件</div>
    <Son/>
  </div>
</template>

<script>
import { defineComponent, reactive, toRaw } from 'vue'
import Son from './son.vue'

export default defineComponent({
  components:{
    Son
  },
  setup() {

  }
})
</script>

 
son组件
 
<template>
  <div class="box">
    son组件 {{ref2.val.age}}
  </div>
  <button @click="handleClick">
    子组件点击
  </button>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const ref2 = inject('ref2')
    const handleClick = () => {
      const key = 'age'
      ref2.update(key, 111) // 调用传递下来的方法去更新父组件的值
    }
    return {
      ref2,
      handleClick
    }
  }
}
</script>

两者都只能在当前活动组件实例的setup()中调用。
生产者消费者

使用 
	import {provide,inject} from 'vue';
	
	setup()
	{
		provide('xx','1234')
		const data=inject('xx',该参数为默认值);
		
		使用ref来保证provided和injected之间值的响应：
			如果注入一个响应式对象，则它的状态变化也可以被侦听。
			
			提供者：
			const themeRef = ref('dark')
			provide(ThemeSymbol, themeRef)
			
			使用者：
			const theme = inject(ThemeSymbol, ref('light'))
			watchEffect(() => {
			  console.log(`theme set to: ${theme.value}`)
			})

	}