$emit 是 Vue.js 中用于触发父组件事件的方法，用法为 $emit(eventName, ...payload)，eventName 为事件名称，payload 为可选的参数。步骤如下：子组件中使用 $emit 触发事件。父组件中使用 v-on 指令监听子组件发出的事件，并执行相应的事件处理函数。
Vue 中 $emit 的用法
什么是 $emit？
$emit 是 Vue.js 中用于触发父组件事件的方法。
用法：
立即学习“前端免费学习笔记（深入）”；
$emit(eventName, ...payload)
-
eventName: 要触发的事件名称 -
payload: 传递给事件处理函数的任何可选参数
详细说明：
$emit 允许子组件向父组件发送事件，使父组件能够对子组件的动作做出响应。
步骤：
- 在子组件中，使用
$emit触发一个事件。 - 在父组件中，使用
v-on指令监听子组件发出的事件，并执行相应的事件处理函数。
示例：
子组件：
<code class="vue"><template>
<button @click="$emit('myEvent')">Click me</button>
</template>
<script>
export default {
methods: {
// 触发 myEvent 事件
emitEvent() {
this.$emit('myEvent');
}
}
}
</script></code>父组件：
<code class="vue"><template>
<child-component @myEvent="handleEvent"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: { ChildComponent },
methods: {
// 响应 myEvent 事件
handleEvent() {
console.log('Event received!');
}
}
}
</script></code>在上面示例中：
- 子组件触发
myEvent事件。 - 父组件通过
v-on监听该事件并执行handleEvent函数。
