vue3动态组件如何使用

其他教程   发布日期:2023年07月13日   浏览次数:444

这篇“vue3动态组件如何使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue3动态组件如何使用”文章吧。

问题:为什么vue3需要对引入的组件使用markRow?

vue2

  1. <template>
  2. <div>
  3. <component :is="A"></component>
  4. </div>
  5. </template>
  6. <script>
  7. import A from './A';
  8. export default {
  9. name: 'Home',
  10. data() {
  11. return {}
  12. },
  13. components: { A },
  14. }

vue3

  1. <template>
  2. <ul>
  3. <li
  4. v-for='(item,index) in tabList'
  5. :key='index'
  6. @click='change(index)'
  7. >
  8. {{ item.name }}
  9. </li>
  10. </ul>
  11. <keep-alive>
  12. <component :is="currentComponent"></component>
  13. </keep-alive>
  14. </template>
  15. <script setup>
  16. import A from '../components/A.vue'
  17. import B from '../components/B.vue'
  18. import C from '../components/C.vue'
  19. let tabList = reactive([
  20. {name:'组件A',com:markRaw(A)},
  21. {name:'组件B',com:markRaw(B)},
  22. {name:'组件C',com:markRaw(C)}
  23. ]);
  24. let currentComponent = reactive({
  25. com:tabList[0]
  26. });
  27. const change = ( idx )=>{
  28. currentComponent = tabList[idx].com;
  29. }

以上就是vue3动态组件如何使用的详细内容,更多关于vue3动态组件如何使用的资料请关注九品源码其它相关文章!