动态组件
通过改变值，和is属性 显示相应的组件
<body>
<div id="app">
<select name="" id="" v-model = "val">
<option value="father"> father </option>
<option value="son"> son </option>
</select>
<component :is = "val"></component>
</div>
</body>
<script src="../../../lib/vue.js"></script>
<script>
Vue.component('Father',{
template: '<div> father </div>'
})
Vue.component('Son',{
template: '<div> son </div>'
})
new Vue({
el: '#app',
data: {
val: 'father'
}
})
</script>
组件缓存
keep-alive组件可以实现组件的缓存，让组件的切换能够更快
keep-alive会激活连个钩子函数 activated deactivated
activated 激活，正在显示的
deactivated keep-alive被停用
<body>
<div id="app">
<select name="" id="" v-model = "val">
<option value="Father"> father </option>
<option value="Son"> son </option>
</select>
<keep-alive :include = "val">
<component :is = "val"></component>
</keep-alive>
</div>
</body>
<script src="../../../lib/vue.js"></script>
<script>
/* !keep-alive组件可以实现组件的缓存，让组件的切换能够更快
keep-alive会激活连个钩子函数 activated deactivated
activated 激活，正在显示的
deactivated keep-alive被停用
*/
Vue.component('Father',{
template: '<div> father </div>',
activated () {
/* !keep-alive组件专用 */
console.log('father-activated')
},
})
Vue.component('Son',{
template: '<div> son </div>',
activated () {
/* !keep-alive组件专用 */
console.log('son-activated')
},
})
new Vue({
el: '#app',
data: {
val: 'Father'
},
activated () {
/* !keep-alive组件专用 */
console.log('inactived')
},
deactivated () {
/* !keep-alive组件专用 */
console.log("兵哥: deactivated -> deactivated")
}
})
</script>
