0
点赞
收藏
分享

微信扫一扫

Vue3中<component>组件的使用

Vue3中<component>组件的使用_加载

在Vue3中,可以使用<component>组件来实现动态组件的加载,其使用方式如下:

  1. setup函数中引入defineComponent函数:

import { defineComponent } from 'vue'

  1. setup函数中定义组件:

const ComponentA = defineComponent({
  template: `
    <div>Component A</div>
  `
})
const ComponentB = defineComponent({
  template: `
    <div>Component B</div>
  `
})

  1. 在模板中使用<component>组件,并动态绑定组件名:

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

  1. setup函数中定义变量currentComponent,并根据需要动态修改组件名:

setup() {
  const currentComponent = ref('ComponentA')

  const toggleComponent = () => {
    currentComponent.value = currentComponent.value === 'ComponentA' ? 'ComponentB' : 'ComponentA'
  }

  return {
    currentComponent,
    toggleComponent
  }
}

这样就可以实现在一个组件中动态地加载不同的子组件。

举报

相关推荐

0 条评论