vue emit使用

Vue中的$emit方法用于子组件向父组件触发自定义事件。子组件可以使用$emit方法来触发父组件中定义的事件。[1]

在父组件中，首先需要定义一个函数来处理子组件触发的事件。通常情况下，$emit方法多用于点击事件。例如，如果我想通过子组件的点击来改变我的名称，我可以按照以下步骤进行操作：[2]

1. 在父组件中定义一个data属性来存储名称的值。
2. 在父组件的模板中，使用子组件，并通过@click事件监听子组件的点击事件。
3. 在父组件的methods中定义一个函数来处理子组件触发的事件。这个函数会接收子组件传递的数据，并将其赋值给父组件的data属性。

在子组件中，需要按照以下步骤来使用$emit方法：[3]

1. 定义一个点击方法，并传入需要改变的值。
2. 使用$emit方法触发父组件中定义的事件。需要确保传递的事件名称与父组件中的事件名称保持一致。
3. 通过data属性将需要传递的参数进行传递。

下面是一个示例代码：

父组件：

<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>

子组件：

<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>

在这个示例中，当子组件中的h2元素被点击时，会触发change方法，该方法会通过$emit方法触发父组件中的showCityName事件，并传递一个包含新名称的数据对象。父组件中的updateCityName方法会接收到这个数据对象，并将其赋值给msg属性，从而改变显示的名称。

希望这个示例能够帮助你理解Vue中的$emit方法的使用。