深山大泽平原2022-12-08 来自重庆用模板语法的数组实现组件的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>展开作者回复: 您好，你提供的代码非常棒！本课受限于篇幅，没能展开讲解Vue.js 3的<component /> 组件。
共 3 条评论4
ZR-rd2022-12-02 来自北京JSX 不能配置 scoped 避免 CSS 样式干扰，那么 JSX 应该如何做才能避免样式干扰呢作者回复: 您好，避免样式干扰方式有很多。 1. 可以从className角度处理，比如可以约定一个className命名规律，尽量避免className重名。 2. 可以借助JS in CSS处理方案，比如用 styled-components这个npm模块。
共 4 条评论1
直须2023-02-09 来自广东怎么在.vue文件中引入jsx组件呢作者回复: 您好，在.vue文件里可以直接引入JSX组件的，这个取决于所用的构建工具（Webpack、Vite等）是否加载了Vue JSX语法的编译插件。
共 4 条评论
飞雪👻2022-12-02 来自陕西想请教一下, 我不太明白在用JSX写转换顺序, render函数中-------转换顺序: {`${isReverse}`}------ 为什么不直接写作{ isReverse } , 而是用模板字符串包裹呢 ?作者回复: 您好，两种书写方式都可以的，本课代码只是写多一个模板字符串的使用，无特殊用意。
共 2 条评论
都市夜归人2022-11-30 来自江苏用模板方法一样能通过调整数组的顺序去实现，而不是用v-if。这是为了使用JSX而这样做的吧，个人觉得例子举的不是很恰当。共 1 条评论1
请叫我潜水员2022-11-29 来自广东dialog那个例子用模板是一样的效果，Dialog组件从dialog.vue中引入，然后创建一个相同的createDialog，使用效果一模一样。因为我就是这么用的共 3 条评论1
中欧校友2023-07-30 来自上海模板语法递归在组件内用name名再次引用，JSX在组件函数内直接使用函数名调用实现梯柜