赞
踩
在 Vue 2
中,使用 Provide/Inject
跨组件共享数据,在 Vue 3
中也可以,甚至可以在不依赖VueX的前提下,实现全局状态共享。
使用 Provide
时,一般设置为 响应式更新的,这样的话,父组件变更,子组件、子孙组件也跟着更新。
实现祖与后代组件间通信。
具体实现:父组件有一个 provide
选项来提供数据,后代组件有一个 inject
选项来开始使用这些数据。
设置数据为响应式更新:
ref / reactive
创建响应式变量provide
(‘name
’, ‘要传递的响应式变量’)provide
中的变量也跟着更新。provide
接受两个参数,第一个参数是provide
唯一名称,第二个参数是需要暴露的数据。
父组件 provide
:
<template>
<HelloWorld></HelloWorld>
</template>
<script lang="ts">
import HelloWorld from '../components/HelloWorld.vue'
import {
ref, reactive, provide, defineComponent } from 'vue'
/
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。