巧用 Vue 3 组合式 API，取代 Vue 2 的 $refs

2023-09-15 00:27:39

在 Vue 2 中，refs 是一种强大的工具，用于获取组件实例的 DOM 元素引用。然而，在 Vue 3 中，由于 composition API 的出现，refs 已不复存在。这篇文章将探讨如何在 Vue 3 中使用组合式 API 替代 $refs，实现组件之间的交互。

理解组合式 API

Vue 3 引入了组合式 API，它是一种新的、更灵活的方式来管理组件状态和逻辑。组合式 API 是独立于组件实例的函数，可以被多个组件复用。

替代 $refs 的方法

在 Vue 3 中，以下方法可以替代 $refs：

ref 对象： ref 对象通过 Vue.ref() 函数创建，它存储组件实例或 DOM 元素的引用。
自定义 hook： 可以创建一个自定义 hook，例如 useRefs()，用于管理组件之间的引用。
Composition API 的 provide/inject： 可以使用 provide/inject 机制在组件之间传递引用。

实例示例

替代方法 1：ref 对象

// 组件 A
export default {
  setup() {
    const myRef = ref(null);
    return {
      myRef,
    };
  },
};

// 组件 B
export default {
  setup() {
    const { myRef } = useRefs();
    // 使用 myRef 访问组件 A 的 DOM 元素
    console.log(myRef.value);
  },
};

替代方法 2：自定义 hook

// useRefs.js
export const useRefs = () => {
  const refs = {};
  const setRef = (key, value) => {
    refs[key] = value;
  };
  const getRef = (key) => {
    return refs[key];
  };
  return { setRef, getRef };
};

// 组件 A
export default {
  setup() {
    const { setRef } = useRefs();
    onMounted(() => {
      setRef('myRef', this.$refs.myRef);
    });
    return {};
  },
};

// 组件 B
export default {
  setup() {
    const { getRef } = useRefs();
    const myRef = getRef('myRef');
    // 使用 myRef 访问组件 A 的 DOM 元素
    console.log(myRef);
  },
};

替代方法 3：Composition API 的 provide/inject

// 提供者组件
export default {
  setup() {
    const myRef = ref(null);
    provide('myRef', myRef);
    return {};
  },
};

// 注入者组件
export default {
  setup() {
    const myRef = inject('myRef');
    // 使用 myRef 访问组件 A 的 DOM 元素
    console.log(myRef.value);
  },
};