展开说说provide和inject

写在前面

讲解思路

demo

app.vue

<template>
	<LevelOne></LevelOne>
</template>

<script setup>
  import LevelOne from './components/children/LevelOne.vue'	
  import { provide } from 'vue'
  provide('content','我是app里面的数据')
</script>

一级组件

<template>
	<LevelTwo></LevelTwo>
</template>

<script setup>
	import { provide } from 'vue'
	import LevelTwo from './LevelTwo.vue'
	provide('content','我是一级组件的值')
</script>

二级组件

<template>
	<LevelThree></LevelThree>
</template>

<script setup>
	import { provide } from 'vue'
	import LevelThree from './LevelThree.vue'
	provide('content', '我是二级组件的值')
</script>

三级组件

<template>
	<div>我是三级组件,我获取的内容是：{{content}}</div>
</template>

<script setup>
	import { ref,inject } from 'vue'
	const content = ref()
	content.value = inject('content')
</script>

输出结果

我是三级组件,我获取的内容是：我是二级组件的值

如果我直接将二级组件里面的提供者去掉：

<template>
	<LevelThree></LevelThree>
</template>

<script setup>
	import LevelThree from './LevelThree.vue'
</script>

输出结果

我是三级组件,我获取的内容是：我是一级组件的值

结论