使用Vue 3提供带设置功能的注入

Question

有人知道如何在设置函数中提供变量吗？

export default {
name: "MyComponent",
provide: {
myVariableThatIWantToProvide // This is not working
},
setup() {
const myVariableThatIWantToProvide = ref('test');
return {
myVariableThatIWantToProvide
};
}
};
</script>

Answer 1

您应该从vue导入provide并在设置函数中使用：

import {ref,provide} from "vue"
export default {
name: "MyComponent",

setup() {
const myVariableThatIWantToProvide = ref('test');
provide ('myVariableThatIWantToProvide', myVariableThatIWantToProvide )
return {
myVariableThatIWantToProvide
};
}
};
</script>

孙组件中：

import {inject} from "vue"
export default {
name: "somechild",

setup() {
const myVariableThatIWantToProvide =inject ('myVariableThatIWantToProvide')
return {
myVariableThatIWantToProvide
};
}
};
</script>