使用 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>