form

bed1f7f1 · wuyb@phxg.cn · 807421b4 · bed1f7f1 · bed1f7f1 · bed1f7f1
4 changed file
--- a/vite-demo/index.html
+++ b/vite-demo/index.html
@@ -8,7 +8,6 @@
  </head>
  <body>
    <div id="app"></div>
-    
    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
--- a/vite-demo/src/views/skills/components/attrs/attrsChild.vue
+++ b/vite-demo/src/views/skills/components/attrs/attrsChild.vue
+
+<template>
+    <div>这是一个标准化组件</div>
+    <input type="text" :value="num" @input="setInput" />
+</template>
+
+<script>
+    import { defineComponent } from "vue";
+
+    export default defineComponent({
+        props: ['num'],
+        emits: ['edit'],
+        setup(props, { emit }) {
+            function setInput(val) {
+                emit('edit', val.target.value)
+            }
+            return {
+                setInput
+            }
+        }
+    })
+</script>
+ 
--- a/vite-demo/src/views/skills/components/attrs/comOne.vue
+++ b/vite-demo/src/views/skills/components/attrs/comOne.vue
+<template>
+       <button @click="f">heihei</button>
+</template>
+
+<script setup>
+    import {useAttrs } from "@vue/runtime-core";
+    const emits = defineEmits(['fun2'])
+    const {onFun} = useAttrs()
+    const f = () => {
+        if(onFun)
+            onFun()
+        emits('fun2')
+    }
+    console.log(useAttrs())
+</script>
--- a/vite-demo/src/views/skills/vue3/fnApi.vue
+++ b/vite-demo/src/views/skills/vue3/fnApi.vue
@@ -2,24 +2,43 @@
    <div id="mask"></div>
    <renderFn :type="1">
        <p>默认插槽： 111111</p>
-        <template #name >
-          <span>具名插槽</span>  name
+        <template #name>
+            <span>具名插槽</span> name
        </template>
    </renderFn>
+
+    <div>attrs</div>
+    <attrsChild v-bind="$attrs" @edit="edit"></attrsChild>
+
+    <!--    组件1（加上fun事件，但不在emits中声明）-->
+    <com-one-vue @fun='call'/>
+
+    <div>
+        <!--        组件1（加上fun2事件，在emits中声明）-->
+        <com-one-vue @fun2='call'/>
 </template>

 <script>
    import {renderFn} from '../components/renderFn.js'
+    import attrsChild from "../components/attrs/attrsChild.vue";

    console.log(renderFn);
    export default {
        name: "createVNode",
        components: {
-            renderFn
+            renderFn,
+            attrsChild
        },
-        setup(props, ctx) {
-            console.log(ctx);
+        setup(props, {emit}) {
+            function edit(val) {
+                console.log('edit', 0);
+                // 对返回的值做一个包装
+                emit('edit', `${val}time`)
+            }

+            return {
+                edit
+            }
        }
    }
 </script>