vue动态组件
1.第一层
|
<div id="app">
<div class="left">
<ul>
<li @click='ul="bingren"'>我的病人</li>
<li @click='ul="bingli"'>电子病历</li>
</ul>
</div>
<div class="right">
<component :is='ul'></component>
</div>
</div>
//vue实例
var app = new Vue({
el: '#app',
data: {
ul: 'bingren',
}
})
|
2.第二层
|
Vue.component('bingren', {
template: '<div>我是病人</div>'
}), Vue.component('bingli', {
template: `<div><button @click='dz="dianz"'>电子病历</button> <button @click='dz="add"'>添加病例</button><component :is='dz'></component></div>`,
data() {
return {
dz: 'dianz'
}
}
}), Vue.component('dianz', {
template: '<div>电子病历111</div>'
}), Vue.component('add', {
template: '<div>电子病历222</div>'
})
|
