淘宝双十一超级红包 》
Vue3 emits 属性
Vue3 选项式 API在 Vue3 中，emits 属性用于定义一个组件可以触发的事件。
emits 是一个数组或对象，用于明确声明组件将触发哪些自定义事件。
通过 emits 属性，开发者可以更好地管理组件的事件，并提高代码的可读性和可维护性。
为什么使用 emits 属性？
在 Vue2 中，父组件通过 v-on 监听子组件的事件，而子组件通过 $emit 方法触发事件。这种方式虽然简单直接，但随着项目规模的增长，事件的管理可能会变得混乱。Vue3 引入 emits 属性，有以下好处：
- 清晰的事件声明：通过
emits属性，开发者可以明确知道组件会触发哪些事件。 - 代码可读性：在组件中查看
emits属性，可以快速了解组件的事件交互。 - 类型检查和警告：如果触发的事件未在
emits中声明，Vue 会在开发模式下发出警告，帮助开发者发现潜在问题。
如何使用 emits 属性？
1. 基本用法
在组件中，emits 可以是一个数组，数组中列出所有自定义事件的名称。
实例
<script>
export default {
emits: ['update:modelValue', 'submit'],
methods: {
handleClick() {
this.$emit('submit', 'Form submitted!');
}
}
}
</script>
export default {
emits: ['update:modelValue', 'submit'],
methods: {
handleClick() {
this.$emit('submit', 'Form submitted!');
}
}
}
</script>
在上面的例子中，emits 数组声明了 update:modelValue 和 submit 两个事件。当调用 this.$emit('submit', 'Form submitted!') 时，会触发 submit 事件，并传递数据 'Form submitted!'。
2. 对象用法
emits 也可以是一个对象，对象的键是事件名称，值是一个验证函数。验证函数用于检查传递的事件参数是否有效。
实例
<script>
export default {
emits: {
submit: (payload) => {
if (typeof payload === 'string') {
return true;
} else {
console.warn('Submit event payload must be a string!');
return false;
}
}
},
methods: {
handleClick() {
this.$emit('submit', 'Form submitted!');
}
}
}
</script>
export default {
emits: {
submit: (payload) => {
if (typeof payload === 'string') {
return true;
} else {
console.warn('Submit event payload must be a string!');
return false;
}
}
},
methods: {
handleClick() {
this.$emit('submit', 'Form submitted!');
}
}
}
</script>
在这个例子中，submit 事件的验证函数会检查 payload 是否为字符串。如果不是，会在控制台中输出警告信息。
3. 与 v-model 结合使用
emits 属性常与 v-model 一起使用，特别是处理自定义组件中的双向绑定。
实例
<template>
<input :value="modelValue" @input="updateValue" />
</template>
<script>
export default {
props: ['modelValue'],
emits: ['update:modelValue'],
methods: {
updateValue(event) {
this.$emit('update:modelValue', event.target.value);
}
}
}
</script>
<input :value="modelValue" @input="updateValue" />
</template>
<script>
export default {
props: ['modelValue'],
emits: ['update:modelValue'],
methods: {
updateValue(event) {
this.$emit('update:modelValue', event.target.value);
}
}
}
</script>
在这个例子中，当输入框的值发生变化时，会触发 update:modelValue 事件，并将新的值传递给父组件。
注意事项
- 事件名称大小写：Vue 中的事件名称是大小写不敏感的，但建议使用 kebab-case（短横线分隔）命名方式。
- 验证函数的返回值：如果验证函数返回
false，Vue 会在开发模式下发出警告，但事件仍然会被触发。 - 默认事件：某些原生事件（如
click）不需要在emits中声明，除非你需要验证它们的参数。