Vue之第二篇章学习(动态组件、插槽、自定义指令)
1.动态组件
动态组件指的是:动态的切换组件的显示与隐藏
我们之前可以使用v-if来显示、隐藏组件,但是这样代码臃肿,冗余。我们这里用到Vue的内置组件《component》
示例代码:
<template>
<div id="app">
<component :is="comName"></component>
</div>
</template>
<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
export default {
name: 'App',
data(){
return {
comName: 'Left'
}
},
components: {
Left,
Right
}
}
</script>
利用Vue内置组件《component》并且绑定is属性,通过绑定is的属性值为变量,来动态切换组件。(比如app下面的“首页”、“我的”切换)
1.1《keep-alive》
但是使用上面《component》,我们发现如果切换回原来的组件的时候,组件会被重新创建,并不会缓存之前的状态。
示例代码:
<template>
<div id="app">
<keep-alive>
<component :is="comName"></component>
</keep-alive>
</div>
</template>
<script>
import Left from "@/components/Left.vue";
import Right from "@/components/Right.vue";
export default {
name: "App",
data() {
return {
comName: "Left",
};
},
components: {
Left,
Right,
},
};
</script>
默认被包裹在keep-alive中的所有组件会被缓存,就可以保持之前的状态。