子组件向父组件发送自定义事件 - daniel-qa/Vue GitHub Wiki

子组件向父组件发送自定义事件

this.$emit('event-name') 用于从子组件向父组件发送自定义事件

* 傳送 Event:  this.$emit('customEvent')

* 接收 Event:  @customEvent="handleMessage"
  • 子组件
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('customEvent', 'Hello!');
    }
  }
};
</script>
  • 父组件
<template>
  <div>
    <ChildComponent @customEvent="handleMessage" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message); // 输出: Hello!
    }
  }
};
</script>

总结

事件名称是灵活的，可以根据实际情况自定义。

监听事件的格式（@eventName 或 v-on:eventName）是固定的。

在 Vue.js 中，this.$emit('exitPreview') 用于从子组件向父组件发送自定义事件。这通常用于通知父组件某个操作或状态的变化，以便父组件可以相应地更新其状态或执行某些逻辑。

示例

    1. 子组件代码
<template>
  <button @click="exitPreview">Exit Preview</button>
</template>

<script>
export default {
  methods: {
    exitPreview() {
      // 发出自定义事件 'exitPreview'
      this.$emit('exitPreview');
    }
  }
};
</script>
    1. 父组件代码
<template>
  <div>
    <ChildComponent @exitPreview="handleExitPreview" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleExitPreview() {
      // 处理退出预览的逻辑
      console.log('Exiting preview...');
      // 你可以在这里执行其他逻辑，比如更新状态或导航
    }
  }
};
</script>

解析

子组件：在子组件中，当用户点击按钮时，会调用 exitPreview 方法，并发出 exitPreview 事件。

父组件：父组件通过 @exitPreview="handleExitPreview" 监听这个事件。当事件被触发时，handleExitPreview 方法会被调用，你可以在这个方法中处理需要执行的逻辑。

应用场景

状态管理：在多组件应用中，通过事件机制来管理状态。

用户交互：在子组件中处理用户操作，向父组件发送状态变化。

⚠️ **GitHub.com Fallback** ⚠️