需求分析
switch组件仿照ant design来进行设计，实现类似手机设置中的开关按钮，点击按钮向右滑动。
如图所示
API设计
<button class="pokemon-switch" @click="toggle" :class="{'pokemon-checked':value}">
用按钮来进行设计，给它添加一个类，当关闭时是灰色并且内侧白色小球在左侧，添加一个事件监听，当click的时候触发toggle事件，实现切换。当检测到切换时，会变成蓝色，内部白色小球滑动向右。
代码实现
写样式
首先初始化这个switch组件，用css画出它的样子。
再写一个切换后的样式
添加动画即可实现切换后的效果。
添加事件监听 点击时触发toggle事件，让控制是否切换的类进行true和false的切换。
setup(props, context) {
const toggle = () => {
context.emit('update:value', !props.value)
//input 与SwitchDemo组件的input事件对应，！props.value与$event对应
}
return {toggle}
},
控制初始状态和更新以后的状态
在不使用v-model的情况下，如果要实现与外部组件互相通信，我们需要给出一个value属性以及input事件。 通过props接受外部组件的value值。再通过setup的两个参数，和context.emit(事件名, 事件参数)办法来操作。
外部
<template>
<Switch :value="status" @input="status=$event" />//$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"
v-model等价于@update:value="status=$event" 这样就可以通过v-model来进行组件通信了。
