Vue.js 动态组件补充
2017-04-19 本文已影响0人
myjs
Vue.js官方文档动态组件部分有点模糊,稍作补充。
完善下官方文档提供的例子:
var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { template: '<p id='p1'>Welcome Home!</p>' }, //模板
posts: { template: '<p id='p2'>Posts!</p>' },//模板
}
});
<component v-bind:is="currentView">
<!-- 组件在 vm.currentview 变化时改变! -->
</component>
组件如何动态?区别于Vue.component()
注册组件,这里到底显示哪个模板是根据vm.currentview
的值定的。例如:
vm.currentview='posts'; //渲染显示:<p id='p2'>Posts!</p>
这里没有做缓存,更改p2的innerHTML之后,重新切换模板会恢复模板原来的数据:
$("#p2").html("新内容"); //渲染显示:<p id='p2'>新内容</p>,内容被改变
vm.currentview='home'; //渲染显示:<p id='p1'>Welcome Home!</p>
vm.currentview='posts'; //渲染显示:<p id='p2'>Posts!</p>,又重新恢复原始内容
如果希望保持修改后的内容,可以添加一个keep-alive
指令参数,修改HTML结构如下:
<keep-alive>
<component :is="currentView">
<!-- 非活动组件将被缓存! -->
</component>
</keep-alive>
此时更改p2的innerHTML之后,重新切换模板会保持之前的修改结果。