vue3-mgt-template/src/views/demo/jsx/index.vue

<template>
    <el-card header="当一个vue页面有多个相同dom结构时，dom比较简单，不想提一个子组件，这个时候可以使用jsx语法">
        <h3>vue template写法</h3>
        <ul class="demo-jsx-ul">
            <li
                v-for="item in list"
                :key="item.name"
            >
                <div>姓名: {{ item.name }}</div>
                <div>年龄: {{ item.age }}</div>
                <div>地址: {{ item.address }}</div>
            </li>
        </ul>

        <h3>vue jsx写法DOM一</h3>
        <renderJsx
            refName="JsxUlRef1"
            label="1"
            :list="list"
        />
        <h3>vue jsx写法DOM二</h3>
        <renderJsx
            refName="JsxUlRef2"
            label="2"
        />
    </el-card>
</template>

<script setup lang="jsx">
import { ref, onMounted } from 'vue';
import { message } from '@/utils/message';
import styles from './jsx.module.scss';

/**
 * 1. jsx中怎么使用element组件
 * 2. jsx语法中样式问题（全局，css modules）
 * 3. jsx语法中ref的使用
 * 4. jsx在template中怎么写才能渲染
 */
defineOptions({
    name: 'DemoJsx',
});

const refs = ref({});
const list = ref([
    {
        name: 'John',
        age: 25,
        address: 'New York',
    },
    {
        name: 'Jane',
        age: 30,
        address: 'London',
    },
    {
        name: 'Bob',
        age: 28,
        address: 'Paris',
    },
]);

const renderJsx = (props) => {
    console.log(props);
    return (
        <ul class="demo-jsx-ul">
            {list.value.map((item, index) => (
                <li key={index}>
                    <div>姓名: {item.name}</div>
                    <div>年龄: {item.age}</div>
                    <div>地址: {item.address}</div>
                </li>
            ))}
            <el-button
                type="primary"
                class="mb-10"
                onClick={elementBtnClick}
            >
                测试添加element组件
            </el-button>
            <div class={styles.btn}>css modules样式测试</div>
            <el-button
                ref={(el) => (refs.value[props.refName] = el)}
                type="primary"
                onClick={() => changeRefText(props.refName, props.label)}
            >
                测试ref{props.label}
            </el-button>
        </ul>
    );
};

const elementBtnClick = () => {
    message('elementBtnClick', { type: 'info' });
};

const changeRefText = (refName, label) => {
    refs.value[refName].ref.innerText = `测试ref${label}改名字了`;
};

onMounted(() => {
    console.log(refs);
});
</script>

<style lang="scss" scoped>
/** 这里局部样式对jsx组件不会生效 */
// .demo-jsx-ul {
//     margin: 0 auto;

//     li {
//         border: 1px solid #ccc;
//         padding-left: 20px;
//         margin: 20px 0;
//     }
// }
</style>
<style lang="scss">
/** 这里的样式相当于是全局样式，对jsx组件会生效，但是也会影响其他所有样式，另外一种解决方案是css module, 参考上面例子 */
.demo-jsx-ul {
    margin: 0 auto;

    li {
        border: 1px solid #ccc;
        padding-left: 20px;
        margin: 20px 0;
    }
}
</style>