一、前言
<component>
元素是vue
里面的内置组件。
在<component>
里面使用 :is
,可以实现动态组件的效果。
二、示例解析
下面例子创建一个包含多子组件的 vue
实例。
-
vue
代码部分:新建vue
实例 “app”,这个实例的components
里面,有3个组件,这些组件都有各自的模板。分别是 acomp,bcomp,ccomp -
html
代码部分:使用vue
内置组件<component></component>
,并使用 “is
” 特性(需要通过v-bind
给 “is
” 绑定值)。"is
" 绑定值传入一个组件名,就会切换到这个组件。
<div id="app">
<component :is="whichcomp"></component>
<button @click="choosencomp('a')">a</button>
<button @click="choosencomp('b')">b</button>
<button @click="choosencomp('c')">c</button>
</div>
//做一个包含列表组件
//需要给组件创建props--"todos",用于存放组件通过绑定prop --"todo"获取实例中的data数据"todolists"
var app=new Vue({
el: '#app',
components:{
acomp:{
template:
<p>这里是组件A</p>
},
bcomp:{
template:
<p>这里是组件B</p>
},
ccomp:{
template:
<p>这里是组件C</p>
}},
data:{whichcomp:""},
methods:{
choosencomp (x) {
this.whichcomp=x+"comp"
}
}
})
网页渲染效果:
点击 A 按钮,文字显示切换到 “显示组件A”
点击C 按钮,文字显示切换到 “显示组件C”