跨级组件之间的数据传递

跨级组件之间的数据传递:
对于父组件而言，如果想要为后代组件提供数据，需要使用provide（）函数，对于子组件而言，如果想要注入上层组件或整个应用提供数据，需要使用injection（）函数。
一、provide（）函数
Provide（）函数可以提供一个值，用于被注入后代组件注入。provide（）函数的语法格式如下。
provide（注入名，注入值）provide（）函数可以接收2个参数，第1个参数是注入名，后代组件会通过注入名查找所需注入值，第2个参数值，值可以是任意类型，包括响应式数据，例如通过ref（）函数创建数据。
在不使用set up 语法糖的情况下，provide（）函数必须在组件的set up （）函数中调用。使用provide（）函数示例代码如下。

<script>
  import { ref ,provide}from 'vue'
  export default{
	set up(){
	const count = ref(1)
	provide(
		//注入名
		'message',
		//注入的值
		count
)
}
}
<script>

当使用setup语法糖时，使用provide（）函数示例代码如下。

<script set up>
import {provide}from 'vue'
provide  ('message','Hello Vue.js')
</script >

provide ()函数除了可以在某个组件中提供依赖外，还可以提供全局依赖。例如，在src\main.js文件中添加全局依赖，示例代码：

const app = createApp(App)
app.provide('message','Hello Vue.js')

添加完后，全局依赖可以在Vue的任何组件中被使用。