标签：child1 Vue 20 component alive vue nbsp template
1 动态组件
1 <component> 元素，动态地绑定多个组件到它的 is 属性
2 <keep-alive> 保留状态，避免重新渲染
2 基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ref放在子组件上</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="box">
<span @click="who='child1'">首页</span>
<span @click="who='child2'">商品</span>
<span @click="who='child3'">购物</span>
<hr>
<componet :is="who"></componet>
</div>
</body>
<script>
Vue.component('child1', {
template: `<div>
首页
</div>`,
})
Vue.component('child2', {
template: `<div>
商品
</div>`,
})
Vue.component('child3', {
template: `<div>
购物车
</div>`,
})
let vm = new Vue({
el: '#box',
data: {
who:'child1'
},
methods:{
}
})
</script>
</html>
二、vue之keep-alive
1 不使用keep-alive
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态组件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="box">
<span @click="who='child1'">首页</span>
<span @click="who='child2'">商品</span>
<span @click="who='child3'">购物</span>
<hr>
<componet :is="who"></componet>
</div>
</body>
<script>
Vue.component('child1', {
template: `<div>
首页
</div>`,
})
Vue.component('child2', {
template: `<div>
商品
<input type="text">
</div>`,
})
Vue.component('child3', {
template: `<div>
购物车
</div>`,
})
let vm = new Vue({
el: '#box',
data: {
who:'child1'
},
methods:{
}
})
</script>
</html>
2 使用keep-alive
keep-alive 保留状态，避免重新渲染
<keep-alive>
<component :is="who"></component>
</keep-alive>
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态组件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="box">
<span @click="who='child1'">首页</span>
<span @click="who='child2'">商品</span>
<span @click="who='child3'">购物</span>
<hr>
<keep-alive>
<componet :is="who"></componet>
</keep-alive>
</div>
</body>
<script>
Vue.component('child1', {
template: `<div>
首页
</div>`,
})
Vue.component('child2', {
template: `<div>
商品
<input type="text">
</div>`,
})
Vue.component('child3', {
template: `<div>
购物车
</div>`,
})
let vm = new Vue({
el: '#box',
data: {
who:'child1'
},
methods:{
}
})
</script>
</html>
标签：child1,Vue,20,component,alive,vue,nbsp,template 来源： https://www.cnblogs.com/Haier123/p/15894305.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。