制作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当儿子
