vue3中的defineExpose使用示例教程

<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
// 像 defineExpose 这样的编译器宏不需要导入
defineExpose({
  a,
  b
})
</script>

<template>
<div class="p-20 pb-0 mb-4">
  <div>父组件</div>
  <button class="mt-4" @click="handleClick">点我聚焦</button>
</div>
<Child ref="childeRef"></Child>
</template>
<script setup lang="ts">
import { ref, provide, onMounted } from "vue";
import Child from "./Child.vue";
const childeRef = ref<HTMLInputElement | null>(null);
const handleClick = () => {
  childeRef.value?.inputRef?.focus();
};
</script>

<template>
  <hr />
  <div class="p-20 pt-4">
    <div>子组件</div>
    <input
      ref="inputRef"
      placeholder="请输入哈哈哈哈"
      class="border-1 mt-4"
    /><br />
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const inputRef = ref<HTMLInputElement | null>(null);
defineExpose({
  inputRef,
});
</script>