vue的component标签用法

在 Vue 中， 标签用于动态地渲染组件。它可以将一个组件的名称作为 is 属性进行动态传入，然后根据传入的组件名称渲染对应的组件。这个标签通常与 v-bind 指令一起使用，可以方便地切换不同的组件。

下面是一个简单的示例，演示如何使用 标签动态渲染组件：

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <component :is="currentComponent"></component>
  </div>
</template>

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

export default {
    
    
  data() {
    
    
    return {
    
    
      currentComponent: 'ComponentA'
    }
  },
  methods: {
    
    
    toggleComponent() {
    
    
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
    }
  },
  components: {
    
    
    ComponentA,
    ComponentB
  }
}
</script>

在上面的示例中，我们定义了两个组件 ComponentA 和 ComponentB，然后使用 标签根据 currentComponent 的值动态地渲染不同的组件。点击 “Toggle Component” 按钮可以切换当前渲染的组件。