Vue3 Props

子组件想要修改自身的值不应该自己修改，应该通过事件触发给父组件让父组件来修改。

//父组件
<template>
  <div>
    <Switch :value="y"  @input=" y = value "/>
      <Switch :value="y"  @update:value=" y = value "/>
      //可以简写为
       <Switch v-model:value="y"/>
  </div>
</template>
<script lang="ts" >
import Switch from '../lib/Switch1.vue'
import { ref } from 'vue'
export default {
  components: {Switch},
  setup(){
    const y = ref(false)
    return {y}
  }
} 
</script>

//子组件
<template>
  <button @click="toggle" :class="{checked:value}"> <span></span> </button>
</template>
<script lang="ts">
import { ref } from 'vue'
export default {
  props: {
    value: Boolean
  },
  setup(props, context){
    const toggle = ()=>{
      context.emit('input', !props.value)
      父组件改写为v-model写法后 emit触发事件必须为update: + props
      context.emit('update:value', !props.value)
      // this.$emit()
    }
    return {toggle}
  } 
}
</script>