当前位置：首页 > article >正文

【Vue3学习】使用ref调用子组件的方法,实现子组件的显示与隐藏

article 2024/12/27 10:20:02

不同于v2的写法,在v3中,子组件的方法和变量需要用defineExpose 暴露出去,defineExpose 是 Vue 3 提供的一个 API，用于显式地暴露组件中的方法或属性给外部（通常是父组件）。它的主要用途是让你能够控制哪些内容可以被父组件通过 ref 或 $refs 访问到。

代码演示

子组件

<template>
  <div v-show="visible" class="child-component">
    <!-- 子组件的内容 -->
    <p>This is the child component.</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 定义一个 ref 变量来控制组件的显示和隐藏
const visible = ref(false);

// 定义一个方法来切换显示/隐藏状态
const toggleVisibility = () => {
  visible.value = !visible.value;
};

// 暴露方法和变量给父组件
defineExpose({
  toggleVisibility,
});
</script>

<style scoped>
.child-component {
  padding: 10px;
  border: 1px solid #ccc;
}
</style>

父组件

<template>
  <div>
    <button @click="toggleChildVisibility">Toggle Child Visibility</button>
    <ChildComponent ref="childRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 通过 ref 引用子组件实例
const childRef = ref<InstanceType<typeof ChildComponent> | null>(null);

// 切换子组件显示/隐藏的方法
const toggleChildVisibility = () => {
  if (childRef.value) {
    childRef.value.toggleVisibility();
  }
};
</script>

<style scoped>
button {
  margin-bottom: 10px;
}
</style>