vue中使用$emit传递参数

在Vue中，$emit方法用于触发当前实例上的事件。你可以在子组件中使用$emit来发送数据到父组件。以下是一个简单的例子：

假设你有一个父组件ParentComponent和一个子组件ChildComponent。你想从ChildComponent发送一个名为custom-event的事件到ParentComponent，并且传递一个参数。

在子组件ChildComponent中：

<template>
  <button @click="sendDataToParent">Send Data to Parent</button>
</template>
 
<script>
export default {
  methods: {
    sendDataToParent() {
      const data = 'some data';
      this.$emit('custom-event', data);
    }
  }
}
</script>

在父组件ParentComponent中：

<template>
  <child-component @custom-event="handleDataFromChild"></child-component>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleDataFromChild(data) {
      console.log('Data received from child:', data);
    }
  }
}
</script>

在这个例子中，当在ChildComponent中点击按钮时，会触发sendDataToParent方法，该方法使用this.$emit来发出一个名为custom-event的事件，并传递了字符串'some data'作为参数。父组件通过监听custom-event事件来接收数据，并在其方法handleDataFromChild中处理它。