制作switch按钮时 我们想通过value  或者@input 事件等来传值时

如代码 ==>>以下要彭父子通信

//在父组件SweitchDemo中引入switch组件

<Switch :value = 'xxx'  @input = ' yyy = $event' />

在子组件中接收

setup(props,context){ // context是我们接收的第二个参数  我们可以通过设置它来改变input的值 

    并在父组件中用@input事件时时更新 更新的可以$event来接收   所以@click = "y = $event" 即表示y的值根据$event的值来决定
    const toogle = ()=>{

        //props.value = !props.value //这个在这里会报错 说布尔值不能赋值 它是一个常量
        context.emit('input',!props.value)
    }

return {toggle} //要想得到结果 必须要return出去
}

内部数据setup(){   

    const checked = ref(false)     

    const toggle = （）=>{       

    checked.value = !checked.value        

             //checked是常量声明不能改蛮值 但是我们可以改变它值的value   

     }

}

button组件

export defaule{
    inheritAttrs:false ;   //取消button默认传过来的点击事件 
}

<button  v-bind = '$attrs'> //先取消 再传到button按钮上面  --如果template里面加了div 默认点击事件传到div上面的

    <slot/>//插槽位置

</button>

第二种方法 绑定不同的元素

Teleport的作用

当我们给组件外面加上teleport标签时 然后写上to='到哪个标签'  下图是我不想当现在这个人的儿子了 

我想到body里面去 给body当儿子