vue3 emit updata

在 Vue 3 中，emit 和 v-model 都有了一些变化。
对于 emit，现在可以使用 emit 方法来直接触发一个事件，而不需要在组件实例上手动定义该事件。例如：
// 子组件
const ChildComponent = {
setup(props, { emit }) {
const handleClick = () => {
emit('my-event', 'some data')
}

return {
handleClick
}
}
}

// 父组件中使用
<template>
<child-component @my-event="handleMyEvent" />
</template>

<script>
import ChildComponent from './ChildComponent'

export default {
components: {
ChildComponent
},
methods: {
handleMyEvent(data) {
console.log(data)
}
}
}
</script>
登录后复制
对于 v-model，Vue 3 提供了一个新的指令 v-model 的语法糖 v-model:value 和 v-model:emit，分别用于绑定值和触发事件。例如：
// 子组件
const ChildComponent = {
props: {
modelValue: {
type: String,
default: ''
}
},
emits: ['update:modelValue'],
setup(props, { emit }) {
const handleChange = (event) => {
emit('update:modelValue', event.target.value)
}

return {
handleChange
}
},
template: `
<input :value="modelValue" @input="handleChange" />
`
}

// 父组件中使用
<template>
<child-component v-model:value="text" />
</template>

<script>
import ChildComponent from './ChildComponent'

export default {
components: {
ChildComponent
},
data() {
return {
text: ''
}
}
}
</script>
登录后复制
在子组件中，我们需要定义 props 和 emits，其中 props 中的 modelValue 表示绑定的值，emits 中的 update:modelValue 表示触发更新值的事件。然后在 setup 中通过 emit 触发该事件。在父组件中，我们可以使用 v-model:value 来绑定值，并且这个值会自动传递给子组件；同时我们也可以使用 v-model:emit 来指定触发更新值的事件，默认为 update:modelValue。