子组件可以通过 $emit 触发一个事件,并将数据传递给父组件。在父组件中,我们可以在子组件的标签中使用 v-on 指令来监听这个事件。在子组件中,我们可以通过 this.$emit 触发这个事件。

父组件:htmlCopy

<template>
  <div>
    <child-component @customEvent="handleCustomEvent"></child-component>
  </div>
</template>

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

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

子组件:htmlCopy

<template>
  <div>
    <button @click="handleClick">Trigger Custom Event</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('customEvent', 'Hello from child!');
    },
  },
};
</script>

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注