defineExpose defineEmits

Vue.js 中 defineExpose 和 defineEmits 的用法
使用 defineExpose
在组合式 API (Composition API) 下，组件默认不会暴露任何属性给父级组件。如果希望让某些特定的属性或方法被外部访问，则可以使用 defineExpose 来指定哪些部分是可以公开使用的。
<script setup>
import { ref } from 'vue'

const count = ref(0)

// 只有当定义了 defineExpose 后, 才能从外面获取到 increment 方法以及 count 值
function increment() {
count.value++
}

defineExpose({
count,
increment
})
</script>

<template>
<button @click="increment">Increment</button>
</template>
登录后复制
此代码片段展示了如何通过 <script setup> 定义了一个按钮用于增加计数器数值，并且允许父组件访问该子组件内的 count 数据和 increment() 函数[^1]。
使用 defineEmits
对于事件触发来说，在选项API里通常会利用 $emit('eventName') 形式的语法来调用；而在 Composition API 中则推荐采用 defineEmits 方便地声明并传递自定义事件名及其参数列表。
<script setup>
// 定义 emit 对象以便后续用来分发事件
const emit = defineEmits(['change'])

let message = "Hello"

function sendMessage(){
emit('change',message);
}
</script>

<template>
<input v-model="message"/>
<button @click="sendMessage()">Send Message</button>
</template>
登录后复制
上述例子中创建了一个输入框绑定至变量 message, 当点击发送按钮时将会执行 sendMessage() 调用并通过 emit 发送带有新消息字符串作为载荷的数据给监听者处理程序。