在不使用v-model的情况下，如果要实现与外部组件互相通信，我们需要给出一个value属性已经input事件。
通过props接受外部组件的value值。再通过setup的两个参数，和context.emit(事件名, 事件参数)办法来操作。
实例如下：
外部
<template>
<Switch :value="status" @input="status=$event" />
</template>
<script lang='ts'>
export default {
components: {Switch},
setup() {
const status = ref(false)
return {status}
}
</script>
内部
<template>
<button @click="toggle" :class="{checked:value}">
</template>
export default {
props: {
value: Boolean
},
setup(props,context) {
const toggle = () => {
context.emit('input',!props.value)
//input 与SwitchDemo组件的input事件对应，！props.value与$event对应
}
return {toggle}
}
}
在Vue3中尤雨溪规定，属性名可以任意，比如x，那么事件名必须是update:x,然后使用v-model
外部
<Switch v-model:value="status" /> //v-model等价于@update:value="status=$event"
内部
export default {
props: {
value: Boolean
},
setup(props, context) {
const toggle = () => {
context.emit('update:value', !props.value)
//因为props中的属性名为value，所以事件名必须为'update:value'
}
return {toggle}
}
}
v-model等价于@update:value="status=$event"
这样就可以通过v-model来进行组件通信了。
