Vue组件中的自定义事件你了解多少

当我们在vue组件中进行数据交互时，父组件向子组件传递了数据，在子组件中操作了这些数据，并根据需求将结果返回给父组件时，我们就需要用到自定义事件。自定义事件可以让我们在父组件中监听到子组件事件的触发并获取子组件中需要返回的数据，从而完成父子组件间的数据交互。

以下是自定义事件的步骤和示例：

步骤一：在子组件中定义自定义事件并触发

在子组件中通过 this.$emit('eventName', data) 来定义并触发一个自定义事件。其中，eventName 为自定义事件名称，data 为需要传递给父组件的数据。

示例代码：

<template>
  <button @click="touch">点击触发事件</button>
</template>

<script>
export default {
  methods: {
    touch() {
      let data = '这是子组件需要返回给父组件的数据';
      this.$emit('myEvent', data);
    }
  }
};
</script>

上面的示例代码中，当点击按钮时，子组件将一个自定义事件 myEvent 以及需要传递给父组件的数据 data 触发。

步骤二：在父组件中监听自定义事件并获取数据

在父组件中，使用 v-on 或 @ 监听子组件的自定义事件，并通过$event 来获取传递过来的数据。

示例代码：

<template>
  <div>
    <h3>父组件</h3>
    <child-component @myEvent="doSomething"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    doSomething(data) {
      console.log(data);
    }
  }
};
</script>

上面的示例代码中，在父组件中通过 v-on 来监听子组件的自定义事件 myEvent，并在doSomething方法中通过参数data来获取传递过来的数据。

除此之外，还可以使用修饰符，如 .prevent 阻止默认行为,.stop 阻止事件传播等来扩展自定义事件的功能。

当我们需要进行一个弹窗提示的时候，也可以使用自定义事件进行交互。例如：

<template>
  <div>
    <child-component @openDialog="showDialog"></child-component>
    <div v-if="isShowDialog">
      <p>这是弹窗内容</p>
      <button @click="closeDialog">确定</button>
    </div>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      isShowDialog: false
    };
  },
  methods: {
    showDialog() {
      this.isShowDialog = true;
    },
    closeDialog() {
      this.isShowDialog = false;
    }
  }
};
</script>

上面的示例代码中，在子组件中通过 this.$emit('openDialog') 触发了一个自定义事件 openDialog，用以告诉父组件需要弹窗。在父组件中通过监听 openDialog 事件并设置 isShowDialog 的值来实现弹窗的显示和隐藏。这样就通过自定义事件实现了子组件向父组件的弹窗操作，提高了组件复用的灵活度。