vue中emits的用法

百变鹏仔 3个月前 (09-25) #VUE

文章标签 vue

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

Vue 中 emits 的用法

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

基本用法

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

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

export default {  emits: ['update-count'],  data() {    return {      count: 0    };  },  methods: {    incrementCount() {      this.count++;      this.$emit('update-count', this.count);    }  }};

在父组件中监听事件：

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

传递参数

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

// 子组件this.$emit('update-count', this.count, 'Custom data');// 父组件handleUpdateCount(count, customData) {  console.log('Count updated to:', count);  console.log('Custom data:', customData);}

使用别名

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

// 子组件emits: {  updatedCount: 'update-count'}// 父组件<template><child></child></template>

最佳实践

文章推荐

vue中emits的用法

如何使用Vue和网易云API构建高性能的音乐搜索引擎

Vue中使用v-model的双向绑定优化应用的数据性能

Vue和Canvas：如何实现在线头像裁剪和尺寸调整工具

Vue组件通讯的实现方式有哪些？

如何使用Vue和网易云API开发一款智能化的音乐播放器