重点:
component 元素可用来挂载不同的组件;
使用 is 来动态挂载组件,注意要使用 v-bind,也就是 :is 。
今天的内容很简单,只有一个内容——component。
Vue 给我们提供了一个 component 元素,它可以用来动态挂载不同的组件。
就像斗地主的癞子玩法,component 就是“癞子”,你想让 component 是哪个组件,它就可以是哪个组件。
还记得刚开始学组件的时候,我们学了一个“在标签上挂载组件”吗?
<table>
<tr is="my-component"></tr> // table 中写的是 tr,用 is 属性把 my-component 挂载到 tr
</table>
无独有偶,今天的 component,同样使用 is 来挂载不同的组件。
接下来就通过一个 demo 展开学习。
demo:有四个按钮,点击不同的按钮,显示不同的视图。
1.准备好四个组件和四个按钮
<div id="app">
<component></component>
<button>第1句</button>
<button>第2句</button>
<button>第3句</button>
<button>第4句</button>
</div>
// 下面四个组件,每个组件代表不同的视图,
// 简单起见,每个视图里只有一句不同的诗
Vue.component('A-component', {
template: '<div>离离原上草</div>'
})
Vue.component('B-component', {
template: '<div>一岁一枯荣</div>'
})
Vue.component('C-component', {
template: '<div>野火烧不尽</div>'
})
Vue.component('D-component', {
template: '<div>春风吹又生</div>'
})
var app = new Vue({
el: '#app',
data: {}
})
2. 让 component 默认显示 A-component
<div id="app">
<component :is="thisView"></component> // 1. 用 is 动态绑定 thisView
<button>第1句</button>
<button>第2句</button>
<button>第3句</button>
<button>第4句</button>
</div>
Vue.component('A-component', {
template: '<div>离离原上草</div>'
})
Vue.component('B-component', {
template: '<div>一岁一枯荣</div>'
})
Vue.component('C-component', {
template: '<div>野火烧不尽</div>'
})
Vue.component('D-component', {
template: '<div>春风吹又生</div>'
})
var app = new Vue({
el: '#app',
data: {
thisView: 'A-component' // 2. thisView 的值是 A-component
}
})
渲染:
3. 给按钮添加点击事件,显示不同的诗句(视图)
<div id="app">
<component :is="thisView"></component>
<button @click="handleView('A')">第1句</button> // 1. 添加点击事件,并传入不同的参数
<button @click="handleView('B')">第2句</button>
<button @click="handleView('C')">第3句</button>
<button @click="handleView('D')">第4句</button>
</div>
Vue.component('A-component', {
template: '<div>离离原上草</div>'
})
Vue.component('B-component', {
template: '<div>一岁一枯荣</div>'
})
Vue.component('C-component', {
template: '<div>野火烧不尽</div>'
})
Vue.component('D-component', {
template: '<div>春风吹又生</div>'
})
var app = new Vue({
el: '#app',
data: {
thisView: 'A-component'
},
methods: {
handleView: function (tag) {
this.thisView = `${tag}-component` // 2. 改变 thisView 的值,也就是改变视图
}
}
})
现在,点击不同的按钮,就实现了显示不同的视图的功能。
以上四个组件,每个组件就是一个视图,点击按钮切换组件,也就切换了视图。
动态组件体现在哪儿?
component 元素就是动态的啊,当你点击第一个按钮,component 就挂载了 A-component 组件,点击第二个按钮,component 就挂载了 B-component 组件,以此类推。所以,component 就可以看做是一个变来变去(动态)的组件。