vue中emits的用法-Vue.js-PHP中文网

vue中emits的用法

下次还敢

发布： 2024-05-12 17:09:56

原创

1895人浏览过

emits 指令用于在 Vue 组件中声明自定义事件，以便子组件向父组件传递数据或触发动作。在子组件中使用 emits 定义事件，在父组件中使用 @ 事件监听器来侦听这些事件。可以传递参数和使用别名为子组件中更简洁的语法。最佳实践包括使用唯一的事件名称、避免传递大量数据以及使用 v-on 而不是 $on 侦听事件。

vue中emits的用法

Vue 中 emits 的用法

emits 指令用于在 Vue 组件中声明自定义事件，允许子组件向父组件传递数据或触发动作。

基本用法

在子组件中使用 emits 定义事件：

立即学习“前端免费学习笔记（深入）”；

<code class="javascript">export default {
  emits: ['update-count'],
  data() {
    return {
      count: 0
    };
  },
  methods: {
    incrementCount() {
      this.count++;
      this.$emit('update-count', this.count);
    }
  }
};</code>

登录后复制

在父组件中监听事件：

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

<code class="javascript"><template>
  <Child @update-count="handleUpdateCount" />
</template>

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

export default {
  components: { Child },
  methods: {
    handleUpdateCount(count) {
      console.log('Count updated to:', count);
    }
  }
};
</script></code>

登录后复制

传递参数

可以通过 emits 传递参数，就像在普通 JavaScript 事件中一样：

<code class="javascript">// 子组件
this.$emit('update-count', this.count, 'Custom data');

// 父组件
handleUpdateCount(count, customData) {
  console.log('Count updated to:', count);
  console.log('Custom data:', customData);
}</code>

登录后复制

使用别名

为了在子组件中使用更简洁的语法，可以使用别名：

<code class="javascript">// 子组件
emits: {
  updatedCount: 'update-count'
}

// 父组件
<template>
  <Child @updatedCount="handleUpdateCount" />
</template></code>

登录后复制

最佳实践