Vue3 + TS项目中优雅获取子组件实例，告别undefined的困扰

在 Vue3 + TypeScript 项目中轻松获取子组件实例

问题

在 Vue3 + TypeScript 项目中获取子组件实例是一项常见的需求。然而，传统方法存在一些缺点，例如：

• 需要判断子组件实例是否为 undefined
• 需要监听子组件实例的变化
• 需要使用 Vuex 或 Composition API 等工具

这些缺点会增加代码复杂性和出错几率。

解决方案

为了解决这些问题，我们可以使用以下解决方案：

1. 使用 computed 属性

computed 属性提供了一个缓存机制，只有在依赖项发生变化时才会重新计算。我们可以利用它来存储子组件实例：

export default {
  components: {
    ChildComponent,
  },
  computed: {
    childComponentInstance() {
      return this.$refs.childComponent;
    },
  },
};

2. 使用 watch 方法

watch 方法可以监听数据的变化。我们可以使用它来监视子组件实例是否存在：

export default {
  components: {
    ChildComponent,
  },
  watch: {
    '$refs.childComponent': {
      handler(newVal) {
        if (newVal) {
          this.childComponentInstance = newVal;
        }
      },
      immediate: true,
    },
  },
};

3. 使用 provide/inject

provide/inject 机制允许父组件向子组件提供数据。我们可以使用它来提供子组件实例：

父组件：

export default {
  components: {
    ChildComponent,
  },
  provide() {
    return {
      childComponentInstance: this.$refs.childComponent,
    };
  },
};

子组件：

export default {
  inject: {
    childComponentInstance: {
      default: null,
    },
  },
};

4. 使用 Vuex

Vuex 是一个状态管理工具。我们可以使用它来存储子组件实例：

Vuex 仓库：

export default {
  state: {
    childComponentInstance: null,
  },
  mutations: {
    setChildComponentInstance(state, instance) {
      state.childComponentInstance = instance;
    },
  },
};

父组件：

export default {
  components: {
    ChildComponent,
  },
  created() {
    this.$store.commit('setChildComponentInstance', this.$refs.childComponent);
  },
};

子组件：

export default {
  computed: {
    childComponentInstance() {
      return this.$store.state.childComponentInstance;
    },
  },
};

5. 使用 Composition API

Composition API 提供了一种新的方式来组织组件逻辑。我们可以使用它来创建共享的变量来存储子组件实例：

const childComponentInstance = ref(null);

父组件：

export default {
  components: {
    ChildComponent,
  },
  created() {
    childComponentInstance.value = this.$refs.childComponent;
  },
};

子组件：

export default {
  setup() {
    return {
      childComponentInstance,
    };
  },
};

结论

以上解决方案提供了一种更加简洁高效的方法来获取子组件实例，避免了传统的判断和监听机制。根据项目的具体需求，我们可以选择最合适的解决方案。

常见问题解答

1. 什么时候应该使用 computed 属性？
   当需要在子组件挂载或销毁时重新计算子组件实例时，应该使用 computed 属性。

2. 什么时候应该使用 watch 方法？
   当需要在子组件实例改变时执行特定操作时，应该使用 watch 方法。

3. 什么时候应该使用 provide/inject？
   当需要在多个组件之间共享子组件实例时，应该使用 provide/inject。

4. 什么时候应该使用 Vuex？
   当需要在应用程序的不同部分持久化子组件实例时，应该使用 Vuex。

5. 什么时候应该使用 Composition API？
   当需要组织共享逻辑并在多个组件之间共享子组件实例时，应该使用 Composition API。