在 Vue.js 中，emit 函数用于触发父组件事件，实现子组件与父组件之间的通信。其作用包括：触发父组件事件；传递数据给父组件；通知父组件子组件状态变化。
Vue.js 中 emit 的作用
在 Vue.js 中，emit 函数是一个用于触发父组件事件的机制。它允许子组件与父组件进行通信，传递数据或通知父组件某个特定事件已发生。
作用
emit 函数的主要作用如下：
立即学习“前端免费学习笔记（深入）”；
- 触发父组件事件：允许子组件触发定义在父组件中的事件。
-
传递数据：子组件可以通过
emit函数传递数据或事件参数给父组件。 -
通知父组件状态变化：子组件可以使用
emit函数来通知父组件自身的内部状态或事件发生了变化。
使用方式
要使用 emit 函数，需要在子组件中调用 this.$emit 方法，并传递以下参数：
- 事件名称：要触发的父组件事件的名称。
- 参数（可选）：要传递给父组件的任何数据或参数。
示例
以下示例展示了如何从子组件触发父组件事件并传递数据：
<code class="html"><template>
<button @click="handleClick">Click Me</button>
</template>
<script>
import { defineComponent, onMounted } from 'vue'
export default defineComponent({
setup() {
const handleClick = () => {
this.$emit('clicked', { message: 'Hello from child!' })
}
return {
handleClick
}
}
})
</script></code>在父组件中，可以通过使用 v-on 指令监听子组件触发的事件，如下所示：
<code class="html"><template>
<div>
<Child @clicked="handleChildClick" />
</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
const handleChildClick = (payload) => {
console.log(payload.message) // 输出："Hello from child!"
}
return {
handleChildClick
}
}
})
</script></code>在这个示例中，Child 组件触发了 clicked 事件，并传递了一个包含 message 属性的数据对象作为参数。父组件可以通过 handleChildClick 方法接收并处理这些数据。
