Vue3中的defineExpose函数用法深入解析

defineExpose(exposedObject)

<script setup>
import { ref } from 'vue';

// 子组件内部的状态和方法
const count = ref(0);

function increment() {
  count.value++;
}

// 通过 defineExpose 暴露给父组件
defineExpose({
  count,
  increment
});
</script>

<template>
  <div>
    <p>计数器子组件：{{ count }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Counter from './Counter.vue';

// 通过 ref 获取子组件实例
const counterRef = ref(null);

function callChildMethod() {
  counterRef.value.increment(); // 调用子组件的方法
  console.log('子组件计数值:', counterRef.value.count); // 访问子组件的暴露属性
}
</script>

<template>
  <Counter ref="counterRef" />
  <button @click="callChildMethod">调用子组件方法</button>
</template>

<script setup>
const msg = 'Hello Vue';
</script>

<script setup>
function greet() {
  console.log('子组件方法被调用！');
}
defineExpose({ greet });
</script>

<template>
  <ChildComponent ref="child" />
  <button @click="child.greet()">调用子组件方法</button>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const child = ref(null);
</script>

<script setup>
import { ref } from 'vue';

const isLoading = ref(false);

function startLoading() {
  isLoading.value = true;
}

function stopLoading() {
  isLoading.value = false;
}

defineExpose({ isLoading, startLoading, stopLoading });
</script>

<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';

const childRef = ref(null);

function toggleLoading() {
  childRef.value.startLoading();
  setTimeout(() => {
    childRef.value.stopLoading();
  }, 2000);
}
</script>

<template>
  <ChildComponent ref="childRef" />
  <button @click="toggleLoading">加载 2 秒</button>
</template>

<script setup>
import { ref } from 'vue';

const formData = ref({ name: '', age: null });

function validate() {
  const isValid = formData.value.name !== '' && formData.value.age > 0;
  return isValid;
}

defineExpose({ formData, validate });
</script>

<template>
  <div>
    <input v-model="formData.name" placeholder="输入姓名" />
    <input v-model="formData.age" type="number" placeholder="输入年龄" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import FormComponent from './FormComponent.vue';

const formRef = ref(null);

function submitForm() {
  if (formRef.value.validate()) {
    console.log('表单校验通过！');
  } else {
    console.log('表单校验失败！');
  }
}
</script>

<template>
  <FormComponent ref="formRef" />
  <button @click="submitForm">提交</button>
</template>