这里v-bind:class和v-on:click都是用来为了改变样式用的。
关键是component组件标签。
<script>
//显示定义了三个组件
Vue.component('tab-科长', {
template: '<div>一共有100个科长</div>'
})
Vue.component('tab-处长', {
template: '<div>一种有50个处长</div>'
})
Vue.component('tab-局长', {
template: '<div>一共有10个局长</div>'
})
new Vue({
el: '#dynamic-component-demo',
data: {
currentTab: '局长',
tabs: ['科长', '处长', '局长']
},
//计算属性，根据currentTab的改变来判断选择哪个组件
computed: {
currentTabComponent: function() {
return 'tab-' + this.currentTab
}
}
})
</script>
总结
以上所述是小编给大家介绍的vue 注册组件的使用详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!