CreateEvent

CreateEvent在Vue中的应用

小樊
83
2024-07-02 16:00:43
栏目: 编程语言

在Vue中,可以使用$emit方法来触发事件,从而在父组件中监听并处理该事件。以下是一个简单的示例:

<!-- ChildComponent.vue -->
<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-event', 'Hello from child component');
    }
  }
}
</script>
<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @custom-event="handleCustomEvent" />
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleCustomEvent(data) {
      this.message = data;
    }
  }
}
</script>

在上面的代码中,子组件ChildComponent中的按钮被点击时,会触发handleClick方法,然后使用$emit方法触发名为custom-event的自定义事件,并传递一个字符串参数。在父组件ParentComponent中,监听了子组件的custom-event事件,并调用handleCustomEvent方法来处理事件传递的参数。最终会在页面上显示出Hello from child component

这就是在Vue中通过$emit和自定义事件来实现组件间通信的基本方法。

0
看了该问题的人还看了