defineExpose 属性：用于将子组件中的数据和方法，暴露给父组件，父组件再配合 ref 属性使用。
语法格式
// 子组件：暴露数据和方法 defineExpose({ 数据, 数据, 方法 }); // 父组件：使用数据和方法 ref名称.value.数据 ref名称.value.方法()
基础使用
一、子组件：创建 Child 子组件，通过 defineExpose 暴露数据和方法。
<template> <h3>我是 Child 组件</h3> <p>{{ info.name }} : {{ info.age }}</p> </template> <script setup> import { reactive } from "vue"; let info = reactive({ name: "张三", age: 20 }); const isChild = () => { console.log("我是子组件"); }; // 暴露 info 数据和 isChild 方法 defineExpose({ info, isChild }); </script>
二、父组件：给 Child 组件标签绑定 ref 属性，使用数据和方法。
<template> <h3>首页</h3> <button @click="edit">父组件的按钮</button> <hr /> <Child ref="content"></Child> </template> <script setup> import Child from '../components/Child.vue'; import { onMounted, ref } from 'vue'; // 获取 Child 组件实例对象 let content = ref(); console.log("setup中使用：", content.value); // undefined onMounted(() => { console.log("挂载后使用：", content.value.info); }) const edit = () => { // 执行子组件中的 isChild 方法 content.value.isChild(); // 修改子组件中的 age 数据 content.value.info.age++; console.log(content.value.info); } </script>
注：子组件加载完毕后，才能使用数据和方法。所以不能直接在 setup 中使用。
最终效果：
