vue面试系列(10) vue如何动态加载组件？

最新推荐文章于 2024-03-13 13:44:51 发布

原创最新推荐文章于 2024-03-13 13:44:51 发布 · 470 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js #前端

vue面试题专栏收录该内容

11 篇文章

订阅专栏

本文探讨了Vue.js中如何实现动态加载组件，通过简洁的事例展示了解决方案，适用于前端开发中的组件按需加载需求。

简单的事例

<template>
  <div id="app">
    <!-- vue.js提供了一个特殊元素 component 用来动态挂载组件 使用is特性来选择挂载的组件-->
    <component :is="currentName"></component>

	<!-- 这块可以根据自己的条件去切换 -->
    <button @click="currentThis('A')">切换到A</button>
    <button @click="currentThis('B')">切换到B</button>
    <button @click="currentThis('C')">切换到C</button>

  </div>
</template>

<script>
import A from './components/A'
import B from './components/B'
import C from './components/C'
export default {
  components:{
    A,B,C
  },
  data(){
    return{
      currentName:'A'
    }
  },
  methods:{
    currentThis(m){
      this.current = m
    }
  }
}
</script>