jsx

vite-demo/src/views/skills/components/jsx/btn1.vue

 <template>
-    <div>
-        <h1>title:{{title}} - </h1>
+    <div v-if="show">
+        <h1>title:-{{title}} - </h1>
         这是btn1组件
         <p>组件内部值：{{ num }}</p>
-        <p>props - type:</p>
+        <p>props - type:{{type}}</p>
         <slot></slot>
         <slot name="name"></slot>
+        <button @click="close">关闭</button>
     </div>
 </template>
 <script>
@@ -14,12 +15,19 @@
     export default defineComponent({
         name: 'btn1',
         props: {
-            title: String
+            title: String,
+            type: Number,
+            show: Boolean
         },
-        setup(props) {
+        setup(props, {emit}) {
             console.log('props - btn', props);
             const num = ref(1)
-            return {num}
+            const close = () => {
+                console.log('close')
+                emit('close');
+                emit('update:show', false)
+            }
+            return {num, close}
         }
     })
 </script>
\ No newline at end of file

vite-demo/src/views/skills/components/jsx/index.vue

 <template>
     <button @click="componentsToggle">切换</button>
-    <renderFn :type="componentsType" title="自定义title" :show="isShow">
+    <button @click="onShow">显示</button>
+    <renderFn :type="componentsType" title="自定义title" :show.sync="isShow">
         <div default="{text}">
             <p> 默认插槽： 111111</p>
         </div>
@@ -27,9 +28,7 @@
             let isShow = ref(false)
             let componentsType = ref(1)
             const componentsToggle = () => {
-
                 componentsType.value = componentsType.value === 1 ? 2 : 1
-                console.log('isShow', isShow.value)
             }
             const onShow = () => {
                 isShow.value = true

vite-demo/src/views/skills/components/jsx/renderFn.js

@@ -15,9 +15,13 @@ import {h, watch} from 'vue'
 export default {
     props: ['type', 'show', 'title'],
     setup(props, {slots}) {
-        console.log('props', props);
+        console.log('props - renderFn', props);
         return () => [
-            props.type === 1 ? h(btn1, slots.default) : h(btn2)
+            props.type === 1 ? h(btn1, {
+                title: props.title,
+                type: props.type,
+                show: props.show
+            }, slots.default) : h(btn2)
         ]
     }
 }
\ No newline at end of file