使用 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并在 setup 函数中使用：

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>