vue中provide和inject的使用

        vue中组件传值是比较常见的，也是我们日常编写代码最常用到的，这里主要讲讲provide和inject的用法。

示例：

祖组件

<template>
	<DemoOne></DemoOne>
</template>

<script setup>
  import DemoOne from './DemoOne.vue'	
  import { provide } from 'vue'
  provide('title','我DemoOne是里面的数据')
</script>

父组件 

<template>
	<DemoTwo></DemoTwo>
</template>

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

 子组件

<template>
	<div>我是子组件,我获取的内容是：{{title}}</div>
</template>

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

 ****注：这里输出的结果是父组件的内容，当我们注释掉父组件传输的值时，他输出的则是祖组件的值，由此得出，同名称时，他会通过层级进行查找，这就是provide和inject的特殊用处

我是子组件,我获取的内容是 我是DemoTwo级组件的值