简介
在 Vue 2
中,使用 Provide/Inject
跨组件共享数据,在 Vue 3
中也可以,甚至可以在不依赖VueX的前提下,实现全局状态共享。
使用 Provide
时,一般设置为 响应式更新的,这样的话,父组件变更,子组件、子孙组件也跟着更新。
作用
实现祖与后代组件间通信。
具体实现:父组件有一个 provide
选项来提供数据,后代组件有一个 inject
选项来开始使用这些数据。
使用
设置数据为响应式更新:
- 使用
ref / reactive
创建响应式变量 - 使用
provide
(‘name
’, ‘要传递的响应式变量’) - 添加一个更新 响应式变量的事件,这样响应式变量更新,
provide
中的变量也跟着更新。
实例
provide
provide
接受两个参数,第一个参数是provide
唯一名称,第二个参数是需要暴露的数据。
父组件 provide
:
<template>
<HelloWorld></HelloWorld>
</template>
<script lang="ts">
import HelloWorld from '../components/HelloWorld.vue'
import { ref, reactive, provide, defineComponent } from 'vue'
// `Provide/Inject` 在 `setup` 中 使用,必须从 `vue` 中导入使用。
export default defineComponent({
name: 'Home',
components: { HelloWorld },
setup() {
const description = ref('Hello World,this is index page,I am father component')
const obj = reactive({
name: 'xiaoming',
age: '20',
})
function changeProvideInfomation() {
obj.name = 'xiaofang'
}
provide('desc', description)
provide('obj', obj)
return {
changeProvideInfomation,
}
},
})
</script>
Tips:provide
第一个参数最好用Symbol
,避免重复。
inject
inject
接收两个参数,第一个参数是provide
名称,第二个参数是默认数据。(如果provider
没有暴露自己的数据,那么使用inject
默认数据。)
子组件 inject
:
<template>
<p>fatherDescription:{{ fatherDescription }}</p>
<p>fatherObj.name:{{fatherObj.name}}</p>
<p>fatherObj.age:{{fatherObj.age}}</p>
</template>
<script lang="ts">
import { inject, defineComponent } from 'vue'
// `Provide/Inject` 在 `setup` 中 使用,必须从 `vue` 中导入使用。
export default defineComponent({
name: 'helloworld',
setup() {
const fatherDescription = inject('desc')
const fatherObj = inject('obj')
return { fatherDescription, fatherObj }
},
})
</script>
页面效果:
provide
和inject
都只能在setup
函数中使用。
provide+inject
取代 Vuex
Tips:在 Vue
项目中,如果不想引入 Vuex
,也可以考虑用provide+inject
取代它,具体如下:
- 自定义并
export
一个hook
叫setProvide
,在这个hook
中使用provide
注册一些全局状态; - 自定义并
export
一个hook
叫useInject
,在这个hook
中使用inject
接收provide
的全局状态; - 在根组件的
setup
函数中调用setProvide
; - 接下来,就可以在任意的子组件共享这些全局状态。