【Vue】component 动态组件 和 is属性
component 动态组件 和 is属性何为动态组件?动态组件:多个组件使用同一个挂载点,并动态切换必要条件:组件标签使用:<component></component>动态绑定使用 is 特性 v-bind:is=""<div id="main"><button @click="changeCom('home')">Home</button
·
component 动态组件 和 is属性
何为动态组件?
动态组件:多个组件使用同一个挂载点,并动态切换
必要条件:
组件标签使用:
<component></component>
动态绑定使用 is 特性 v-bind:is=""
<div id="main">
<button @click="changeCom('home')">Home</button>
<button @click="changeCom('page')">page</button>
<button @click="changeCom('about')">About</button>
<component :is="variable"></component>
</div>
const vm = new Vue({
el: "#app",
components: {
home: {template: `<div>home</div>`},
page: {template: `<div>page</div>`},
about: {template: `<div>about</div>`},
},
data: {
variable: 'home'
},
methods: {
changeCom(name) {
this.variable = name
}
}
})
is 绑定组件的是组件name属性值,也可以绑定一个组件的构造器选项对象
<component :is="comOptions"></component>
data: {
comOptions: {
template: `<div>直接传入一个组件的选项对象</div>`,
}
}
更多推荐
已为社区贡献7条内容
所有评论(0)