将switch的状态通过props传进来

coderjam · coderjam · commit 3cd2fbeb0cc1 · 2022-07-23T21:41:42.000+08:00
diff --git a/src/components/SwitchDemo.vue b/src/components/SwitchDemo.vue
@@ -1,11 +1,16 @@
 <template>
   <div>
-    <Switch />
+    <Switch :value="y" @input="y = $event" />
   </div>
 </template>
 <script lang="ts">
 import  Switch from "../lib/Switch.vue"
+import {ref} from 'vue';
 export default {
-  components:{ Switch }
+  components:{ Switch },
+  setup(){
+    const y = ref(false)
+    return { y }
+  }
 }
 </script>
diff --git a/src/lib/Switch.vue b/src/lib/Switch.vue
@@ -1,15 +1,17 @@
 <template>
- <button @click="toggle" :class="{checked}"> <span></span> </button>
+ <button @click="toggle" :class="{checked:value}"> <span></span> </button>
+  <div>{{ value }}</div>
 </template>
 <script lang="ts">
-import { ref } from 'vue'
 export default {
-  setup(){
-    const checked = ref(true)
+  props:{
+    value:Boolean
+  },
+  setup(props,context){
     const toggle = ()=>{
-      checked.value = !checked.value
+      context.emit('input', !props.value)
     }
-    return { checked,toggle }
+    return { toggle }
   }
 }
 </script>
@@ -23,6 +25,7 @@ button{
   background: grey;
   border-radius: $h/2;
   position: relative;
+  cursor: pointer;
 }
 span{
   position: absolute;
