<button @click="toggle" :class="{checked: checked}">
需要:，没有的话vue识别成字符串
需要" "，不写vue不识别
:class="{checked: xxx}"意思是 xxx为true，则class就是checked，false，即为空
setup(props,context) {
const toggle = () => {
context.emit('input', !prop.value)
}
context.emit接受两个参数事件或者任意
toggle的作用就是把当前的值取反通过input事件发给外面，!prop.value和$event相对应
image.png
switch 接受2个参数:value="y"和@input=“y=$event”事件
一开始设定value，用来代表开关圆圈的位置，当用户点击之后，由于数据是外部的，没有权限管理。只能通过emit触发一个事件('input',最新的value)//input名字可以改
传给出口，@input通过$event拿到最新值，再赋值给value，value再次进到盒子里。于是开关改变位置
我门的Switch有什么问题
最大问题：外界无法知道当前状态开关
在SwitchDemo.vue添加value属性添加input属性
<Switch :value="xxx" @input="xxx=$event"/>
value属性控制每一次的value，每次状态都回在触发事件后更新一次，每更新一次，switch就会再渲染一次。然后我们再添加了一次input事件，可以通过$event拿到最新的值。
如何让Switch.vue 接受value
只要加上props{value：boolean}
如何让Switch发出input事件
用context.emit('input',xxx//=$event)
export default {
props:{
value:Boolean
},
setup(props,context){
const toggle =()=>{
context.emit('input', !props.value)
}
return {toggle}
}
}
image.png
v-model
对父子间数据交流进行简化
如果props里是value则context.emit的'input'必须改叫'update:value'
<Switch :value="y" @update:value="y=$event"/>
还可以用v-model简化
<Switch v-model:value="y">
image.png
image.png
