provide与inject主要用于从父组件向子组件传递数据。
在2.0我们通常用props接收来自父组件的参数,但是一个要从父子组件传递到孙子组件,这种情况就得从父组件到子组件,再从子组件传到孙子组件一级一级传递下去;引入 provide与inject就不需要一级一级向下传递。而是只需从父组件provide出去,再在需要用的组件里面inject即可。如图
论组件层次结构有多深,父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分:父组件有一个 provide
选项来提供数据,子组件有一个 inject
选项来开始使用这些数据。
上用法:
父组件:
<template>
<div>
<div @click="changeVlaue()"> 点击改变</div>
</div>
</template>
import {
reactive,
provide,
ref
} from 'vue'
setup() {
const type= ref("business"); //加上响应式,加上后父组件改变此值所有子组件的值都会跟着变
//const type= "business"; //不加响应式,父组件调用了changeVlaue改变值后,子组件不会跟着一起改变
//const type= reactive({type:"business"}); //另一种响应式,用哪种都行,只是取值的方式不一样
provide('AssetsType', type)
const methods = {
changeVlaue: () => {
type.value='我改变了'
},
}
return {
...toRefs(methods),
type
}
}
子组件:
<template>
<div>
<div> {{AssetsType}}</div>
<div> {{test}}</div>
</div>
</template>
import {
reactive,
inject,
} from 'vue'
setup() {
//用法一
const test = inject('AssetsType')
//用法二
const state: any = reactive({
AssetsType:inject('AssetsType')
})
return {
...toRefs(state),
test
}
}
记录用法:详细看官网