04｜模版语法和JSX语法：你知道Vue可以用JSX写吗？

用模板语法的数组实现组件的reverse： <template> <div class="template-reverse-box"> <template v-for="item in comArr"> <component :is="item.name"></component> </template> <button @click="changeModule">reverse</button> </div> </template> <script setup lang="ts"> import { reactive, markRaw} from 'vue'; import Module01 from './Module01.vue' import Module02 from './Module02.vue' import Module03 from './Module03.vue' import Module04 from './Module04.vue' type Item = { name: any } let comArr = reactive<Item[]>([ { name: markRaw(Module01) }, { name: markRaw(Module02) }, { name: markRaw(Module03) }, { name: markRaw(Module04) }, ]) const changeModule = () => { comArr.reverse() } </script>

JSX 不能配置 scoped 避免 CSS 样式干扰，那么 JSX 应该如何做才能避免样式干扰呢

怎么在.vue文件中引入jsx组件呢

想请教一下, 我不太明白在用JSX写转换顺序, render函数中-------转换顺序: {`${isReverse}`}------ 为什么不直接写作{ isReverse } , 而是用模板字符串包裹呢 ?

用模板方法一样能通过调整数组的顺序去实现，而不是用v-if。这是为了使用JSX而这样做的吧，个人觉得例子举的不是很恰当。

dialog那个例子用模板是一样的效果，Dialog组件从dialog.vue中引入，然后创建一个相同的createDialog，使用效果一模一样。因为我就是这么用的

1. 模板语法实现组件递归（借鉴了前辈的想法） <template v-for="item in array" :key="item"> <component :is="item"/> </template> <script> import A1 from "./A1.vue" import A2 from "./A2.vue" import A3 from "./A3.vue" import {reactive,markRaw} from "vue" let array = reactive([ markRaw(A1), markRaw(A2), markRaw(A3), ]) </script> 2. JSX实现模板组件递归 想法是将组件构造函数引入，结合数组对象来进行实现 // 预先用jsx语法实现了A组件,假设用text接收参数、onOk接收点击事件的回调函数 // 创建组件后返回onClose方法 <script> import {createA} from "./A.jsx" let A1 = createA({ text:'123456', onOk:() => { A1.onClose() } }) </script> // --------------- // 实现JSX的循环调用 <script> import {createA} from "./A.jsx" import {reactive} from "vue" let array = reactive(['123','456','789']) array.forEach(item => let temp = createA( text:item, onOk:() => temp.onClose() ) ) </script>

jsx的css模块化可以使用postcss-modules实现

模板语法递归在组件内用name名再次引用，JSX在组件函数内直接使用函数名调用实现梯柜