跨级组件之间的数据传递:
对于父组件而言,如果想要为后代组件提供数据,需要使用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的任何组件中被使用。