父子组件联动终极指南：Vue3 ref + defineExpose

2023-01-08 17:36:16

Vue3 父子组件联动：深入解析 Ref 和 defineExpose

在 Vue3 中，父子组件的交互是一个常见的需求。通过利用 ref 和 defineExpose 指令，我们可以轻松实现父子组件之间的数据和方法共享，从而增强组件之间的协作和可重用性。

什么是 Ref？

ref 指令允许我们在父组件中获取子组件的实例。它在模板中使用，通过向子组件元素添加 ref 属性来实现。

<template>
  <ChildComponent ref="child" />
</template>

一旦子组件实例化，父组件可以通过 this.$refs.child 访问其实例，进而操控子组件的行为。

什么是 defineExpose？

defineExpose 指令用于在子组件中向父组件公开属性和方法。它仅限于子组件使用，允许我们选择性地共享数据和功能。

// 子组件
export default {
  setup() {
    const count = ref(0);
    const increment = () => { count.value++; };

    defineExpose({ count, increment });
  }
};

通过 defineExpose，我们声明了 count 属性和 increment 方法，使其可以在父组件中访问。

如何使用 Ref 和 defineExpose 实现组件联动？

要建立父子组件联动，请遵循以下步骤：

在父组件中使用 ref 获取子组件实例。
在子组件中使用 defineExpose 公开需要共享的属性和方法。
在父组件中访问子组件公开的属性和调用公开的方法。

一个示例：

父组件：

<template>
  <div>
    <ChildComponent ref="child" />
  </div>
</template>

<script>
export default {
  setup() {
    const child = ref(null);

    onMounted(() => {
      child.value.count = 10;
      child.value.increment();
    });
  }
};
</script>

子组件：

export default {
  setup() {
    const count = ref(0);
    const increment = () => { count.value++; };

    defineExpose({ count, increment });
  }
};