动态组件<component :is=‘‘></component>

简介: 动态组件<component :is=‘‘></component>

vuejs中内置了一个组件component,使用它可以动态切换组件


// template
<button @click="UseComponent = 'component-two'">切换为ComponentTwo</button>
<button @click="UseComponent = 'component-one'">切换为ComponentOne</button>
<component :is="UseComponent" />
// script
import ComponentOne from '@/xxx'
import ComponentTwo from '@/xxx'
export default {
  components: {
    ComponentOne,
    ComponentTwo
  },
  data(){
    return {
      UseComponent: 'component-one'
    }
  }
 }


  • 注意 is 接收的是一个变量, 否则动态组件无动态意义
相关文章
|
7月前
|
前端开发 开发者
类组件(Class component)和 函数式组件(Functional component) 之间有何区别?
类组件(Class component)和 函数式组件(Functional component) 之间有何区别?
108 0
|
6月前
|
设计模式 前端开发 JavaScript
约束性组件( controlled component)与非约束性组件( uncontrolled component)
约束性组件( controlled component)与非约束性组件( uncontrolled component)
|
5月前
|
JavaScript
vue 动态组件【详解】component :is
vue 动态组件【详解】component :is
362 0
|
缓存 JavaScript
75Vue - 使用 v-once 的低级静态组件(Cheap Static Component)
75Vue - 使用 v-once 的低级静态组件(Cheap Static Component)
34 0
|
7月前
|
JavaScript 前端开发 程序员
功能组件( Functional Component )与类组件( Class Component )如何选择?
功能组件( Functional Component )与类组件( Class Component )如何选择?
59 0
|
7月前
Vue3 使用动态组件 component
Vue3 使用动态组件 component
157 0
|
JavaScript
Vue框架(绑定class样式) 1
Vue框架(绑定class样式)
|
JavaScript 前端开发
vue-class-component
vue-class-component
106 1
Vuejs:component动态组件的使用示例
Vuejs:component动态组件的使用示例
157 0
Vuejs:component动态组件的使用示例
|
JavaScript 开发者
组件切换-使用 Vue 提供的 component 元素实现组件|学习笔记
快速学习组件切换-使用 Vue 提供的 component 元素实现组件
140 0
组件切换-使用 Vue 提供的 component 元素实现组件|学习笔记