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>