Vue3 $emit指南--包含选项API、组合API以及 setup 语法糖

www.ydisp.cn/oss/202207/13/c83f0f6675bf9bbb03c3656b051f207a3bf3e5.gif" alt="图片" title="图片" style="width: 872px; visibility: visible; height: 544px;" data-type="block">

每次我们点击按钮，指组合Child.vue​ 都会 emit 一个 add​ 事件，南包并带有一个0到1之间的含选随机值。然后，法糖Parent.vue 捕捉到这个事件，指组合并将这个值添加到计数中。南包

可以传递任意多的含选参数，监听器也会收到所有的法糖参数：

Child - $emit(add, Math.random(), 44, 50)Parent -@add="(i, j, k) => count += i + j + k"

现在，我们知道如何在我们的指组合模板中 emit 内联事件，但在更复杂的南包例子中，如果我们从SFC的含选script 中 emit 一个事件会更好。特别是法糖当我们想在 emit 事件之前执行一些逻辑时，这很有用。指组合

在Vue 3中，南包我们有2种不同的含选方法来做到这一点:

选项API - this.$emit带有setup()​的组合API - context.emit带有<script setup>​的组合API -defineEmits()

我们一个一个来看。

选项API - this.$emit

在 Vue3 中，我人可以选择使用选项API或组合API。

在选项API中，我们可以调用this.$emit来 emit一个自定义事件。

看下面这个例子在 MyTextInput.vue​ 中，它包含一个 label​ 和 input​。每当 input 改变时，我们会 emit 一个事件，并将输入的云服务器提供商值转成大写作为参数传递出去。

我们可以不从模板中调用$emit​，而是调用一个组件方法。在该方法中调用this.$emit并把我们的值传给它。

MyTextInput.vue

export default {

methods: {

handleChange (event) {

this.$emit("customChange", event.target.value.toUpperCase())

}

}

}

My Custom Input

</template>

在 Parent.vue 中接收：

export default {

methods: {

handleChange (event) {

this.$emit("customChange", event.target.value.toUpperCase())

}

}

}

My Custom Input

</template>带有setup()​的组合API - context.emit

在 组合API中，如果使用setup​函数，就不能在用 this​,也就是不能调用this.$emit()方法了。

相反，可以使用 setup 方法中的第二个参数 context​ 来访问 emit​  方法。我们可以用之前使用的事件名称和值调用context.emit。

MyTextInput.vue

export default {

// can use the entire context object

setup (props, context) {

const handleChange = (event) => {

context.emit("customChange", event.target.value)

}

return {

handleChange

}

},

// or we can destructure it and get `emit`

setup (props, { emit }) {

const handleChange = (event) => {

emit("customChange", event.target.value)

}

return {

handleChange

}

}

}

My Custom Input

</template>

在 <script setup> 中的用法

当我们使用<script setup>​时，我们无法访问组件实例或 context​ 上下文参数。那我们怎么获得 emit ?

在这种情况下，我们可以使用 defineEmits:

指定组件要 emit 事件为每个事件添加验证信息可以访问与context.emit相同的值

在最简单的情况下，defineEmits是一个字符串数组，每个字符串是一个事件的名称。

MyTextInput.vue

const emit = defineEmits([customChange])

const handleChange = (event) => {

emit(customChange, event.target.value.toUpperCase())

}

</script>

然而，如果我们传递一个对象，我们可以为每个事件添加一个验证器函数，我们可以在里面检查值是否是网站模板我们所需要的格式。

像事件监听器一样，验证器接受我们传入所有参数。

这与prop  validation 类似，如果我们的验证器返回 false，会在控制台得到一个警告，这为我们提供了一些有用的信息。

MyTextInput.vue

const emit = defineEmits({

unvalidatedEvent: null, // if we want an event without validation

customChange: (s) => {

if (s && typeof s === string) {

return true

} else {

console.warn(`Invalid submit event payload!`)

return false

}

},

})

const handleChange = (event) => {

// no console warning

emit(customChange, event.target.value.toUpperCase())

}

onMounted(() => {

emit(customChange, 1) // not a string, warning!

})

</script>最佳实践

使用 emits 定义自定义事件

如果我们不使用defineEmits​，我们仍然可以通过export default​中定义emits选项来跟踪一个组件的自定义事件。

这对保持良好的组件文档很重要，如果我们试图使用一个没有在 emits 中声明的事件，也会从Vue那里得到错误。

当在 emits 选项中定义了原生事件 (如 change) 时，将使用组件中的事件替代原生事件侦听器。

export default {

emits: ["change"] // or can pass object with validators

}

My Custom Input

type="text"

placeholder="Custom input!"

@input=$emit("change", $event.target.value)

/>

</template>

正确的事件命令

在 vue3 中，与组件和 prop 一样，事件名提供了自动的大小写转换。如果在子组件中触发一个以 camelCase (驼峰式命名) 命名的事件，你将可以在父组件中添加一个 kebab-case (短横线分隔命名) 的监听器。

然而，如果你使用的是服务器托管Vue 2，事件名称没有自动的大小写转换，由于v-on指令会自动将你的事件名称转换为小写，所以camelCase命名的事件不可能被监听到。

例如，如果我们发出了一个名为myEvent​的事件，监听my-event将无法工作。

作者：Noveo 译者：小智  来源：learnvue 原文：https://learnvue.co/tutorals/vue-emit-guide​

很赞哦!（4）