Dynamic Components
文章目录

动态组件 Dynamic Components

比如有时候我们要实现一些类似于 Tab 显示不同内容的功能:

上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is 特性来实现:

1
2
<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

在上述示例中, currentTabComponent 可以包括

  • 已注册组件的名字
  • 一个组件的选项对象

一个完整的例子

1
2
3
4
5
6
<div id="app">
<input type="button" value="切换到第1个组件" @click="tabComponent(1)" />
<input type="button" value="切换到第2个组件" @click="tabComponent(2)" />
<input type="button" value="切换到第3个组件" @click="tabComponent(3)" />
<component :is="current"></component>
</div>

这里有三个按钮以及一个存放动态内容的 components

比较核心的用法就是里面这个 :is 参数:

这个参数在 current 改变的时候就会一起改变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var custom1 = Vue.component("custom1", {
template: `<div @click="changeDivbg">我是第1个组件</div>` ,
methods: {
changeDivbg(ev) {
ev.target.style.background = "red";
}
}
});
var custom2 = Vue.component("custom2", {
template: `<div>我是第2个组件</div>`
})
var custom3 = Vue.component("custom3", {
template: `<div>我是第3个组件</div>`
})

new Vue({
el: "#app",
data: {
current: custom1
},
methods: {
tabComponent(index) {
// 我们在这里修改了 current 的值, 我们将其指向的不同的 component
if (index === 1) {
this.current = custom1
} else if (index === 2) {
this.current = custom2
} else if (index === 3) {
this.current = custom3
}
}
}
})