[前端]vue动态组件的使用

vue动态组件的使用：
1.在父组件中去引入对应的组件。

import HomeView from "./HomeView.vue";
import AboutView from "./AboutView.vue";
export default {
   components: {
    HomeView,
    AboutView,
  }
}

2.在data中设置currentTabComponent属性。

export default {
  data () {
    return {
      currentTabComponent: "HomeView",
    }
  }
}

3.在父组件中去使用动态组件,通过使用currentTabComponent属性确定需要展示的组件。

<component v-bind:is="currentTabComponent"></component>

4.如何切换动态组件的组件。
可以去设置一个点击事件，在点击时切换需要显示的内容。
例如：点击时调用方法切换动态组件要展示组件的名字,即可以切换组件内容。

changeComponentName() {
  this.currentTabComponent = "AboutView";
}