test: 打包测试区分props和attrs功能

coderwei99 · coderwei99 · commit 6718589d175f · 2023-05-06T00:49:05.000+08:00
diff --git a/packages/vue/example/componentsAttrs/App.js b/packages/vue/example/componentsAttrs/App.js
@@ -0,0 +1,26 @@
+import { h, ref } from '../../lib/vue3.esm.js'
+import Child from './cpns/Child.js'
+export default {
+  name: 'App',
+  setup() {
+    const age = ref(18)
+    const handleClick = () => {
+      console.log(111)
+      age.value++
+    }
+    return { handleClick, age }
+  },
+  render() {
+    return h('div', {}, [
+      h('div', 'text App'),
+      h(Child, {
+        // 这里会进行了统一的规范: name & age 如果是props 则会在组件内部通过defineProps进行定义  其余的属性统一当做attrs(即不属于props的都会被当成attrs)
+        name: 'coderwei',
+        age: this.age,
+        number: 95527666,
+        cart: 'bar'
+      }),
+      h('button', { onClick: this.handleClick }, 'add')
+    ])
+  }
+}
diff --git a/packages/vue/example/componentsAttrs/cpns/Child.js b/packages/vue/example/componentsAttrs/cpns/Child.js
@@ -0,0 +1,17 @@
+import { h } from '../../../lib/vue3.esm.js'
+export default {
+  name: 'child',
+  props: {
+    name: {
+      type: String,
+      default: 'coder'
+    },
+    age: {
+      type: Number
+    }
+  },
+  setup() {},
+  render() {
+    return h('div', `age:${this.age}`)
+  }
+}
diff --git a/packages/vue/example/componentsAttrs/index.html b/packages/vue/example/componentsAttrs/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<div id="app"></div>
+
+<body>
+
+  <script type="module">
+    import {createApp} from '../../lib/vue3.esm.js'
+    import App from './App.js'
+    createApp(App).mount(document.querySelector("#app"))
+  </script>
+
+</body>
+
+</html>
