tsx 基本使用方式案例、tsx 使用class 方式

tsx 子组件、tsx 使用class 方式

• tsx 组件代码

import { defineComponent, PropType, h, computed, ref, watch } from 'vue';
import type { Reactive, Ref } from 'vue';
import styles from '../scss/child.module.scss';

// 函数局部组件实现
const myDiv = (param1: Ref, param2: Reactive<{ num: number }>) => {
    return (
        <div>
            <div>{param1.value}</div>
            <div>{param2.num}</div>
        </div>
    );
};

export default defineComponent({
    props: {},
    setup(props) {
        // ref 数据传入子组件
        const myData1 = ref<number>(23);

        // reactive 数据传入子组件
        const myObj: Reactive<{ num: number }> = reactive({
            num: 1
        });

        function myClick() {
            console.log('myClick');
            myData1.value++;

            myObj.num++;
        }

        const mycls = {
            color: 'red'
        };

        return () => (
            <div>
                {/* 动态style使用方式 */}
                <div class="abc" style={mycls}>
                    sdkfjskf
                </div>
                <div>{myDiv(myData1, myObj)}</div>
                {/* ref value读取方式 动态class方式 */}
                <div class={styles.red}>{myData1.value}</div>
                {/* reactive对象数据读取方式 */}
                <div>{myObj.num}</div>
                <div>
                    {/* 事件触发方式 */}
                    <button onClick={() => myClick()}>btn</button>
                </div>
            </div>
        );
    }
});

• child.module.scss

注意 要加入module 命名，才能类似vue的scoped效果,局部样式，而不是全局样式

.red{
    color: red;
}