vue中emit的用法

在Vue中，emit是用于子组件向父组件传递数据的方法。具体使用方法如下：
1. 在子组件中定义一个方法，该方法通过this.$emit()方法触发一个自定义事件，并将需要传递的数据作为参数传入。
2. 在父组件中监听该自定义事件，并定义一个方法来处理传递过来的数据。
3. 在父组件中使用子组件时，通过v-on指令绑定自定义事件，将父组件中定义的方法作为回调函数传入。

例如，在子组件中定义一个change方法，该方法通过this.$emit()方法触发一个名为showCityName的自定义事件，并将需要传递的数据作为参数传入。在父组件中监听showCityName事件，并定义一个updateCityName方法来处理传递过来的数据。在父组件中使用子组件时，通过v-on指令绑定showCityName事件，将父组件中定义的updateCityName方法作为回调函数传入。

具体代码实现可以参考以下示例：

子组件代码：

<template>
  <div class="home">
    <h1>我是子组件</h1>
    <h2 @click="change('武汉')">测试其emit组件</h2>
  </div>
</template>

<script>
export default {
  methods: {
    change(val) {
      let data = {
        msg: val,
      };
      this.$emit("showCityName", data);
    },
  },
};
</script>

父组件代码：

<template>
  <div class="hello">
    <h2>我是父组件,我需要建立一些参数</h2>
    <h3>我所在地的名称是:{{ msg }}</h3>
    <span><mHome @showCityName="updateCityName" /></span>
  </div>
</template>

<script>
import mHome from "@/views/Home.vue";

export default {
  components: {
    mHome,
  },
  data() {
    return {
      msg: "北京",
    };
  },
  methods: {
    updateCityName(data) {
      this.msg = data.msg;
    },
  },
};
</script>

相关问题：
1. Vue中还有哪些常用的组件通信方式？
2. 如何在Vue中实现父子组件之间的数据传递？
3. Vue中的props和emit有什么区别？