目录
一、声明触发的事件
组件可以显式地通过defineEmits()宏来声明它要触发的事件:
<script setup>
defineEmits(['inFocus', 'submit'])
</script>
我们在<template>中使用的$emit方法不能在组件的<script setup>部分中使用,但defineEmits()会返回一个相同作用的函数供我们使用:
<script setup>
const emit = defineEmits(['inFocus', 'submit'])
function buttonClick() {
emit('submit')
}
</script>
defineEmits()宏不能在子函数中使用。如上所示,它必须直接放置在<script setup>的顶级作用域下。如果你显式地使用了setup函数而不是<script setup>,则事件需要通过emits选项来定义,emit函数也被暴露在setup()的上下文对象上:
export default {
emits: ['inFocus', 'submit'],
setup(props, ctx) {
ctx.emit('submit')
}
}
这个emit选项还支持对象语法,它允许我们对触发事件的参数进行验证:
<script setup>
const emit = defineEmits({
submit(payload) {
// 通过返回值为 `true` 还是为 `false` 来判断
// 验证是否通过
}
})
</script>
二、事件校验
和对props添加类型校验的方式类似,所有触发的事件也可以使用对象形式来描述。要为事件添加校验,那么事件可以被赋值为一个函数,接受的参数就是抛出事件时传入emit的内容,返回一个布尔值来表明事件是否合法。
<script setup>
const emit = defineEmits({
// 没有校验
click: null,
// 校验 submit 事件
submit: ({ email, password }) => {
if (email && password) {
return true
} else {
console.warn('Invalid submit event payload!')
return false
}
}
})
function submitForm(email, password) {
emit('submit', { email, password })
}
</script>
三、组件v-model
v-model可以在组件上使用以实现双向绑定。
首先让我们复习一下v-model在原生元素上的用法:
<input v-model="searchText" />
模板编译器会对上面这段代码进行等价展开:
<input
:value="searchText"
@input="searchText = $event.target.value"
/>
它的原理是v-bind的单向绑定searchText这个变量,然后通过@input事件,把input输入框里的值赋值给searchText这个变量。
而当使用在一个组件时,
<CustomInput v-model="searchText" />
v-model会被展开为如下的形式:
<CustomInput
:modelValue="searchText"
@update:modelValue="newValue => searchText = newValue"
/>
要让这个例子实际工作起来,<CustomInput>组件内部需要做两件事:
- 将内部原生<input>元素的value attribute绑定到modelValue prop
- 当原生的input事件触发时,触发一个携带了新值的update:modelValue自定义事件
这里是相应的代码:
<!-- CustomInput.vue -->
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>
<template>
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
</template>
另一种在组件内实现v-model的方式是使用一个可写的,同时具有getter和setter的computed属性。get就去需返回modelValue prop,而set方法需触发相应的事件:
<!-- CustomInput.vue -->
<script setup>
import { computed } from 'vue'
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const value = computed({
get() {
return props.modelValue
},
set(value) {
emit('update:modelValue', value)
}
})
</script>
<template>
<input v-model="value" />
</template>
四、v-model的参数
默认情况下,v-model在组件上都是modelValue作为prop,并以update:modelValue作为对应的事件。我们可以通过给v-model指定一个参数来更改这些名字:
<MyComponent v-model:title="bookTitle" />
在这个例子中,子组件应声明一个title prop,并通过触发update:title事件更新父组件值:
<!-- MyComponent.vue -->
<script setup>
defineProps(['title'])
defineEmits(['update:title'])
</script>
<template>
<input
type="text"
:value="title"
@input="$emit('update:title', $event.target.value)"
/>
</template>
五、多个v-model绑定
利用刚才在v-model中说到指定参数与事件名的技巧,我们可以在间单个组件实例上创建多个v-model双向绑定。
组件上的每一个v-model都会同步不同的prop,而无需额外的选项:
<UserName
v-model:first-name="first"
v-model:last-name="last"
/>
<script setup>
defineProps({
firstName: String,
lastName: String
})
defineEmits(['update:firstName', 'update:lastName'])
</script>
<template>
<input
type="text"
:value="firstName"
@input="$emit('update:firstName', $event.target.value)"
/>
<input
type="text"
:value="lastName"
@input="$emit('update:lastName', $event.target.value)"
/>
</template>
六、处理v-model修饰符
在学习输入绑定时,我们知道了v-model有一些内置的修饰符,例如:.trim,.number和.lazy。
在某些场景下,你可能想要一个自定义组件的v-model支持自定义的修饰符。
我们来创建一个自定义的修饰符capitalize,它会自动将v-model绑定输入的字符串值第一个字母转为大写:
<MyComponent v-model.capitalize="myText" />
组件的v-model上所添加的修饰符,可以通过modelModifiers prop在组件内访问到。在下面的组件中,我们声明了modelModifiers这个prop,它的默认值是一个空对象:
<script setup>
const props = defineProps({
modelValue: String,
modelModifiers: { default: () => ({}) }
})
defineEmits(['update:modelValue'])
console.log(props.modelModifiers) // { capitalize: true }
</script>
<template>
<input
type="text"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>
</template>
注意这里组件的modelModifiers prop包含了capitalize且其值为true,国为它在模板中的v-model绑定v-model.capitalize="myText"上被使用了。
有了这个prop,我们就可以检查modelModifiers对象的键,并编写一个处理函数来改变抛出的值。在下面的代码里,我们就是在每次<input/>元素触发input事件时将值的首字母的大写:
<script setup>
const props = defineProps({
modelValue: String,
modelModifiers: { default: () => ({}) }
})
const emit = defineEmits(['update:modelValue'])
function emitValue(e) {
let value = e.target.value
if (props.modelModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1)
}
emit('update:modelValue', value)
}
</script>
<template>
<input type="text" :value="modelValue" @input="emitValue" />
</template>
对于又有参数又有修饰符的v-model绑定,生成的prop名将是arg+"Modifiers"。举例来说:
<MyComponent v-model:title.capitalize="myText">
相应的声明是:
const props = defineProps(['title', 'titleModifiers'])
defineEmits(['update:title'])
console.log(props.titleModifiers) // { capitalize: true }