vue3的Switch组件添加value属性 和input 事件

237 阅读1分钟

父组件

   <Switch v-model:value="y"  /> //等于<Switch :value="y" @input:value="y = $event" />
        export default{
        components:{Switch},
        setup(){
            const y = ref(false)
            return {y}
            }
    }
   

子组件

props接受 用context的emit 属性进行修改,等于 Vue2的this.$emit('inpit',xxx)

  <button @click="toggle" :class="{ checked:value }"></button>
  
  props: {
        value: Boolean,
  },
  setup(props,context) {
    const toggle = () => {
        context.emit('update:value',!props.value)
    };
    return { toggle };
  },