vue中.$emit

在Vue中，$emit是用于触发当前实例上的事件的方法。它可以向父组件传递数据，也可以在当前组件中触发自定义事件。$emit方法接收两个参数，第一个参数是事件名称，第二个参数是要传递的数据。在父组件中，可以使用v-on指令监听子组件触发的事件，并在回调函数中获取传递的数据。

以下是一个简单的示例，演示了如何在子组件中使用$emit方法触发自定义事件，并在父组件中监听该事件并获取传递的数据：

<!-- 子组件 -->
<template>
  <button @click="handleClick">点击触发事件</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('my-event', 'hello world')
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component @my-event="handleEvent"></child-component>
    <p>接收到的数据：{{ eventData }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      eventData: ''
    }
  },
  methods: {
    handleEvent(data) {
      this.eventData = data
    }
  }
}
</script>

在上面的示例中，子组件中的handleClick方法使用$emit方法触发了一个名为my-event的自定义事件，并传递了一个字符串参数'hello world'。在父组件中，使用v-on指令监听了子组件触发的my-event事件，并在回调函数中获取了传递的数据，并将其保存在了eventData变量中。最后，在父组件的模板中，使用了插值语法将eventData变量的值显示在了页面上。