vue中的this.$emit方法：用于子组件中触发父组件方法并传值

this.$emit 是 Vue 中的一个实例方法，用于触发当前实例上的事件。这主要用于子组件与父组件之间的通信。子组件可以使用 $emit 方法触发父组件的方法，并且可以传递参数。

解法1：

子组件：

<template>
  <button @click="sendToParent">Send to Parent</button>
</template>
 
<script>
export default {
  methods: {
    sendToParent() {
      this.$emit('send', 'Hello, Parent!');
    }
  }
}
</script>

父组件：

<template>
  <div>
    <ChildComponent @send="receiveFromChild" />
    <p>{{ messageFromChild }}</p>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      messageFromChild: ''
    }
  },
  methods: {
    receiveFromChild(msg) {
      this.messageFromChild = msg;
    }
  }
}
</script>

在这个例子中，当在子组件中点击按钮时，会触发 sendToParent 方法，该方法会使用 $emit 方法触发 send 事件，并传递了一个字符串 'Hello, Parent!' 给父组件。父组件监听 send 事件，并在事件触发时调用 receiveFromChild 方法，该方法将接收到的消息赋值给 messageFromChild 数据属性，然后可以在模板中显示出来。

解法2：

子组件：

<template>
  <button @click="sendToParent">Send to Parent</button>
</template>
 
<script>
export default {
  methods: {
    sendToParent() {
      this.$emit('send', { name: 'John', age: 30 });
    }
  }
}
</script>

父组件：

<template>
  <div>
    <ChildComponent @send="receiveFromChild" />
    <p>{{ personFromChild.name }} is {{ personFromChild.age }} years old.</p>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      personFromChild: {}
    }
  },
  methods: {
    receiveFromChild(person) {
      this.personFromChild = person;
    }
  }
}
</script>

在这个例子中，子组件向父组件传递了一个包含 name 和 age 属性的对象。父组件在接收到信息后，将这个对象赋值给 personFromChild 数据属性，然后可以在模板中显示出来。

注意：

• $emit 方法的第一个参数是事件名，后续参数是传递给父组件的值。
• 父组件通过 v-on 或 @ 来监听子组件触发的事件，并指定一个方法来处理接收到的值。