组件事件
触发与监听事件
在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件（例如：在 v-on 的处理函数中）：
<!-- MyComponent -->
<button @click="$emit('someEvent')">Click Me</button>父组件可以通过 v-on（缩写为@）来监听事件：
<MyComponent @some-event="callback" />同样，组件的事件监听器也支持 .once 修饰符：
<MyComponent @some-event.once="callback" />像组件与prop一样，事件的名字也提供了自动的格式转换。注意这里触发了一个以camelCase 形式命名的事件，但在父组件中可以使用kebab-case形式来监听。与 prop大小写格式一样，在模板中也推荐使用 kebab-case 形式来编写监听器。
提示
和原生 DOM 事件不一样，组件触发的事件没有冒泡机制。你只能监听子组件触发的事件。平级组件或是跨越多层嵌套的组件间通信，应使用一个外部的事件总线，或是使用一个全局状态管理方案。
事件参数
有时候会需要在触发事件时附带一个特定的值。举例来所，我们想要 <BlogPost> 组件来管理文本会缩放得多大。在这个场景下，我们可以给 $emit 提供一个额外的参数：
<button @click="$emit('increaseBy', 1)">
Increase by 1
</button>然后我们在父组件中监听事件，我们可以先简单写一个内联的箭头函数作为监听器，此函数会接收到事件附带的参数：
<MyButton @increase-by="(n) => count += n" />或者，也可以用一个组件方法来作为事件处理函数：
<MyButton @increase-by="increaseCount" />该方法也会接收到事件所传递的参数：
function increaseCount(n) {
count.value += n
}提示
所有传入 $emit() 的额外参数都会被直接传向监听器。举例来说，$emit('foo',1,2,3)触发后，监听器函数将会收到这三个参数值。
声明触发的事件
组件可以显式地通过 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')
}
}与setup() 上下文对象中的其他属性一样，emit 可以安全地被解构：
export default {
emits: ['inFocus', 'submit'],
setup(props, { emit }) {
emit('submit')
}
}这个 emits 选项和 defineEmits() 宏还支持对象语法。通过TypeScript 为参数指定类型，它允许我们对触发事件的参数进行验证：
<script setup lang="ts">
const emit = defineEmits({
submit(payload: { email: string, password: string }) {
// 通过返回值为 `true` 还是为 `false` 来判断
// 验证是否通过
}
})
</script>如果你正在搭配 TypeScript 使用 <script setup>，也可以使用纯类型标注来声明触发的事件：
<script setup lang="ts">
const emit = defineEmits<{
(e: 'change', id: number): void
(e: 'update', value: string): void
}>()
</script>尽管事件声明是可选的，还是推荐你完整地声明所有要触发的事件，以次在代码中作为文档记录组件的用法。同时，事件声明能让 Vue 更好地将事件和 透传 attribute 作出区分，从而避免一些由第三方代码触发的自定义DOM事件所导致的边界情况。
提示
如果一个原生事件的名字（例如 click）被定义在 emits 选项中，则监听器只会监听组件触发的click 事件而不会再响应原生的 cilck 事件。
事件校验
和对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 可以在组件上使用以实现双向绑定。从Vue3.4开始，推荐的实现方式是使用defineModel() 宏：
<!-- Child.vue -->
<script setup>
const model = defineModel()
function update() {
model.value++
}
</script>
<template>
<div>Parent bound v-model is: {{ model }}</div>
<button @click="update">Increment</button>
</template>父组件可以用 v-model 绑定一个值：
<!-- Parent.vue -->
<Child v-model="countModel" />defineModel() 返回的值是一个ref。它可以像其他ref一样被访问以及修改，不过它能起到在父组件和当前变量之间的双向绑定的作用：
- 它的 .value 和父组件的 v-model 的值同步；
- 当它被子组件变更了，会触发父组件绑定的值一起更新。
这意味着你也可以用v-model 把这个ref绑定到一个原生 input 元素上，在提供相同的v-model 用法的同时轻松包装原生 input 元素：
<script setup>
const model = defineModel()
</script>
<template>
<input v-model="model" />
</template>底层机制
defineModel 是一个便利宏。编译器将其展开为以下内容：
- 一个名为 modelValue 的prop，本地ref的值与其同步；
- 一个名为 update:modelValue 的事件，当本地ref的值发生变更时触发。
在3.4版本之前，你一般会按照如下的方式来实现上述相同的子组件：
<!-- Child.vue -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>
<template>
<input
:value="props.modelValue"
@input="emit('update:modelValue', $event.target.value)"
/>
</template>然后，父组件中的 v-model="foo" 将被编译为：
<!-- Parent.vue -->
<Child
:modelValue="foo"
@update:modelValue="$event => (foo = $event)"
/>如你所见，这显得冗长得多。然而，这样写有助于理解其底层机制。
因为 defineModel 声明了一个prop，你可以通过给 defineModel 传递选项，来声明底层 prop 的选项：
// 使 v-model 必填
const model = defineModel({ required: true })
// 提供一个默认值
const model = defineModel({ default: 0 })警告
如果为 defineModel prop 设置了一个 default 值且父组件没有为该prop提供任何值，会导致父组件与子组件之间不同步。在下面的示例中，父组件的 myRef 是 undefined，而子组件的 model 是 1：
子组件：
const model = defineModel({ default: 1 })父组件：
const myRef = ref()<Child v-model="myRef"></Child>
v-model 的参数
组件上的 v-model 也可以接受一个参数：
<MyComponent v-model:title="bookTitle" />在子组件中，我们可以通过将字符串作为第一个参数传递给 defineModel() 来支持相应的参数：
<!-- MyComponent.vue -->
<script setup>
const title = defineModel('title')
</script>
<template>
<input type="text" v-model="title" />
</template>如果需要额外的 prop 选项，应该在 model 名称之后传递：
const title = defineModel('title', { required: true })多个 v-model 绑定
利用刚才在 v-model 中学到的指定参数与事件名的技巧，我们可以在单个组件实例上创建多个 v-model 双向绑定。
组件上的每一个 v-model 都会同步不同的prop，而无需额外的选项：
<UserName
v-model:first-name="first"
v-model:last-name="last"
/><script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script>
<template>
<input type="text" v-model="firstName" />
<input type="text" v-model="lastName" />
</template>处理v-model 修饰符
在学习输入绑定时，我们知道v-model有一些内置的修饰符，例如 .trim,.number 和 .lazy。 在某些场景下，你可能想要一个自定义组件的 v-model 支持自定义的修饰符。
我们来创建一个自定义的修饰符 capitalize，它会自动将 v-model 绑定输入的字符串值第一个字母转为大写：
<MyComponent v-model.capitalize="myText" />通过像这样解构 defineModel() 的返回值，可以在子组件中访问添加到组件 v-model 的修饰符：
<script setup>
const [model, modifiers] = defineModel()
console.log(modifiers) // { capitalize: true }
</script>
<template>
<input type="text" v-model="model" />
</template>为了能够基于修饰符选择性地调节值得读取和写入方式，我们可以给 defineModel() 传入 get 和 set 这两个选项。这两个选项在从模型中读取或设置值时会接收到当前得值，并且它们都应该返回一个经过处理得新值。下面是一个例子，展示了如何利用 set 选项来应用 capitalize（首字母大写）修饰符：
<script setup>
const [model, modifiers] = defineModel({
set(value) {
if (modifiers.capitalize) {
return value.charAt(0).toUpperCase() + value.slice(1)
}
return value
}
})
</script>
<template>
<input type="text" v-model="model" />
</template>带参数的 v-model 修饰符
这里是另一个例子，展示了如何在使用多个不同参数的 v-model 时使用修饰符：
<UserName
v-model:first-name.capitalize="first"
v-model:last-name.uppercase="last"
/><script setup>
const [firstName, firstNameModifiers] = defineModel('firstName')
const [lastName, lastNameModifiers] = defineModel('lastName')
console.log(firstNameModifiers) // { capitalize: true }
console.log(lastNameModifiers) // { uppercase: true }
</script>
