vue中$emit的用法

在 Vue 中，$emit 是一个用于触发当前实例上的自定义事件的方法。它可以向父组件传递数据或触发父组件中的方法。

使用 $emit 方法的基本语法如下：

this.$emit(eventName, [args])

其中，eventName 是自定义事件的名称，args 是可选的参数，可以在父组件中通过 $event 对象访问到。

下面是一个示例，用于在子组件中触发一个名为 "add" 的自定义事件，并传递一个参数：

<template>
  <button @click="addItem">添加</button>
</template>

<script>
export default {
  methods: {
    addItem() {
      const item = { name: '新项目', done: false }
      this.$emit('add', item)
    }
  }
}
</script>

在父组件中，可以使用 v-on 指令监听子组件触发的自定义事件，并执行相应的方法：

<template>
  <div>
    <todo-list @add="handleAdd"></todo-list>
  </div>
</template>

<script>
import TodoList from './TodoList.vue'

export default {
  components: {
    TodoList
  },
  methods: {
    handleAdd(item) {
      // 处理添加事件
    }
  }
}
</script>