VUE3之其它组件

JSX的使用

太怪了

实现上面的例子

// HelloWorld.vue
<script>
    export default {
        render() {
            return(
                <div>
                    <h2>hello world</h2>
                    { this.$slots.default? this.$slots.default():<span>我是hello world的默认插槽</span>}
                </div>
            )
        },
    }
</script>

// App.vue
<script>
import HelloWorld from './HelloWorld.vue';
    export default {
        data() {
            return {
                counter:0
            }
        },
        render() {
            const increment=()=>this.counter++;
            const decrement=()=>this.counter--;
            return (
                <div>
                    <h2>当前计数值：{this.counter}</h2>
                    <button onClick={increment}>+1</button>
                    <button onClick={decrement}>-1</button>
                    <HelloWorld>
                        {{default:props=><button>我是按钮</button>}}
                    </HelloWorld>
                </div>
            )
        },
    }
</script>