vue3 provide与inject（一）
原创
在Vue 3中，provide和inject是一对用于父组件向子组件传递数据的高级选项。provide用于在父组件中定义要传递的数据，而inject用于在子组件中接收这些数据。它们提供了一种跨组件层次进行数据传递的方式，方便在组件之间共享数据。
provide和inject的使用
provide的使用
在父组件中，你可以使用provide选项来定义要传递的数据。这些数据可以是基本类型、对象、函数或响应式的数据。
下面是一个示例，演示了如何在父组件中使用provide：
<template>
<div>
<h1>父组件</h1>
<button @click="changeValue">改变值</button>
<child-component></child-component>
</div>
</template>
<script>
import { ref, provide } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
setup() {
const value = ref('初始值');
const changeValue = () => {
value.value = '新值';
};
provide('sharedValue', value);
return {
changeValue
};
}
};
</script>在上面的示例中，父组件中定义了一个value变量，它是一个响应式的数据。通过provide('sharedValue', value)，我们将value以名称sharedValue提供给子组件。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
