使用 const {size, ...rest} = context.attrs 将属性分开

coderjam · coderjam · commit f11eaf1311d9 · 2022-07-24T00:04:31.000+08:00
diff --git a/src/components/ButtonDemo.vue b/src/components/ButtonDemo.vue
@@ -2,13 +2,20 @@
   <div>
     <h1>Button 示例</h1>
     <div>
-      <Button>你好</Button>
+      <Button @click="onClick">你好</Button>
     </div>
   </div>
 </template>
 <script lang="ts">
 import Button from '../lib/Button.vue'
 export default {
-  components:{ Button }
+  components:{ Button },
+  setup(){
+    const onClick = ()=>{
+      console.log('hi');
+    }
+
+    return { onClick }
+  }
 }
 </script>
diff --git a/src/lib/Button.vue b/src/lib/Button.vue
@@ -1,13 +1,20 @@
 <template>
-<button>
-  <slot></slot>
-</button>
+  <div :size="size">
+    <button v-bind="rest">
+      <slot></slot>
+    </button>
+  </div>
 </template>
 
 <script lang="ts">
 export default {
-name: "Button"
-}
+  inheritAttrs: false,
+  setup(props, context) {
+    // ES6 剩余操作符
+    const {size, ...rest} = context.attrs;
+    return {size, rest};
+  }
+};
 </script>
 
 <style lang="scss" scoped>
