2020-10-15解决外部数据获取问题

<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