vu3 - 动态组件

之前我们用到一个组件的时候，在模板里写上组件的标签就可以使用了

 

<counter></counter>

 

这样，在页面上就会显示这个组件，这个组件是固定的
动态组件是不固定要显示哪个组件，只是有个component标签，表示在模板的相应位置有一个组件，
它具体显示哪个组件，要根据它的is属性来决定

 

<component :is="currentComponent"></component>

　

is绑定currentComponent是一个字符串，表示一个组件的名字，组件名字改变时，component标签这个位置显示的组件就会变化

还是用我们之前用过的两个组件做示例，表示两个不同的组件componentA和componentB，在点击按钮时，切换组件，

<template>
  <div>
    <button @click="onClick">点击切换组件</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
// 动态组件
import componentA from './components/componentA.vue'
import componentB from './components/componentB.vue'
export default {
  name: 'App',
  components: {
    // 声明要使用哪些组件
    componentA,
    componentB,
  },
  data() {
    return {
      currentComponent: 'componentA',
    }
  },
  methods: {
    onClick() {
      if (this.currentComponent === 'componentA') {
        this.currentComponent = 'componentB'
      } else {
        this.currentComponent = 'componentA'
      }
    },
  },
}
</script>

<style></style>

　　

来源:https://www.jianshu.com/p/392b03806968