20 vue之动态组件+vue之keep-alive
1 动态组件
1元素，动态地绑定多个组件到它的 is 属性
2保留状态，避免重新渲染
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>