provide 函数
provide 函数用于在父组件中提供数据，这些数据可以被子孙组件访问。provide 接受两个参数：键（key）和值（value）。
<script>
import { provide } from 'vue';
export default {
setup() {
const sharedData = 'Shared Data';
provide('sharedKey', sharedData);
return {};
}
};
</script>
在上述例子中，父组件使用 provide 提供了一个名为 sharedKey 的键，以及与之关联的值 sharedData。
inject 函数
inject 函数用于在子孙组件中注入提供的数据。它接受一个键的数组或对象，并返回相应的值。
<script>
import { inject } from 'vue';
export default {
setup() {
const injectedData = inject('sharedKey', 'Default Value');
return {
injectedData
};
}
};
</script>
在上述例子中，子孙组件使用 inject 注入了名为 sharedKey 的键，并得到了提供的值，如果没有提供的话，使用了默认值 'Default Value'。
示例
下面是一个更完整的例子，展示了如何在父组件中提供数据，然后在子组件中注入并使用这些数据。
<template>
<div>
<p>Parent Component: {{ sharedData }}</p>
<ChildComponent />
</div>
</template>
<script>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
setup() {
const sharedData = 'Shared Data';
provide('sharedKey', sharedData);
return {
sharedData
};
},
components: {
ChildComponent
}
};
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<p>Child Component: {{ injectedData }}</p>
</div>
</template>
<script>
import { inject } from 'vue';
export default {
setup() {
const injectedData = inject('sharedKey', 'Default Value');
return {
injectedData
};
}
};
</script>
在这个例子中，父组件通过 provide 提供了 sharedKey 的数据，然后子组件通过 inject 注入并使用了这个数据。这种方式可以实现非常灵活的组件通信，特别适用于跨越多层级的组件关系。
转载请注明出处：http://www.zyzy.cn/article/detail/520/Vue 3.0