30_keep-alive
2018-02-13 本文已影响0人
CHENPEIHUANG
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
主要用于保留组件状态或避免重新渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p>
<a href="#" @click="which='home'">主页</a>
<a href="#" @click="which='about'">介绍</a>
</p>
<!--<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们-->
<keep-alive>
<div :is='which'></div>
</keep-alive>
</div>
<script src="js/vue.js"></script>
<script>
const Home = {
template:"<div><h1>主页</h1><input type='text' /></div>"
};
const About = {
template:"<div><h1>介绍</h1><input type='text' /></div>"
}
var vm = new Vue({
el:"#app",
components:{
'home':Home,
'about':About
},
data:{
which:'home'
}
})
</script>
</body>
</html>
