Vue2中<component>组件的使用_动态绑定

是Vue2中的动态组件，它可以根据传入的组件名动态地渲染对应的组件，使用方法如下：

  1. 在模板中使用标签，并绑定一个动态组件的名称：
<template>
  <div>
    <component :is="currentComponent"></component>
  </div>
</template>
  1. 在组件中定义多个子组件，并分别命名：
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  }
}
</script>
  1. 在需要切换组件时，修改currentComponent的值：
this.currentComponent = 'ComponentB'
  1. 通过动态绑定props传递数据：
<template>
  <div>
    <component :is="currentComponent" :title="componentTitle"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA',
      componentTitle: 'Hello Vue!'
    }
  }
}
</script>

在子组件中通过props接收数据：

<script>
export default {
  props: {
    title: String
  }
}
</script>