使用v-model

coderjam · coderjam · commit 83ad136a33ed · 2022-07-23T22:12:47.000+08:00
diff --git a/src/components/SwitchDemo.vue b/src/components/SwitchDemo.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Switch :value="y" @input="y = $event" />
+    <Switch v-model:value="y" />
   </div>
 </template>
 <script lang="ts">
diff --git a/src/lib/Switch.vue b/src/lib/Switch.vue
@@ -7,9 +7,11 @@ export default {
   props:{
     value:Boolean
   },
+  // props和context 传值方式
   setup(props,context){
     const toggle = ()=>{
-      context.emit('input', !props.value)
+      // 事件：vue3的v-model改动，之前是input
+      context.emit('update:value', !props.value)
     }
     return { toggle }
   }

Original file line number	Diff line number	Diff line change
`@@ -7,9 +7,11 @@ export default {`
`7`	`7`	`props:{`
`8`	`8`	`value:Boolean`
`9`	`9`	`},`
	`10`	`+ // props和context 传值方式`
`10`	`11`	`setup(props,context){`
`11`	`12`	`const toggle = ()=>{`
`12`		`- context.emit('input', !props.value)`
	`13`	`+ // 事件：vue3的v-model改动，之前是input`
	`14`	`+ context.emit('update:value', !props.value)`
`13`	`15`	`}`
`14`	`16`	`return { toggle }`
`15`	`17`	`}`