动态组件
多个组件使用一个挂载点，并动态切换，就是动态组件
需求：完成一个注册功能页面，2个按钮，一个填写注册信息，一个填写用户简介信息
步骤
- 定义两个组件 UserName.vue，UserInfo.vue 2个组件
- 引入到 App.vue组件中
- data中定义变量来存放要显示的组件名
- 要设置挂载点 <component>，使用 is 属性来设置要显示哪个组件
- 点击按钮，修改变量里的组件名
App.vue
<template>
<div>
<button @click="comName = 'UserName'">账号密码</button>
<button @click="comName = 'UserInfo'"> 个人信息 </button>
<p> 下面显示动态切换组件 </p>
<div style=" border: 1px solid red;">
<component :is="comName"></component>
</div>
</div>
</template>
<script>
/*
同一个挂载点要切换不同组件 显示
1. 创建要切换的组件 标签+样式
2. 引入到要展示的vue文件内，注册
3. 变量 承载要显示的组件名
4. 设置挂载点 <component :is="变量"></component>
5. 点击按钮 切换comName值为要显示的组件名
*/
import UserName from './components/UserName.vue'
import UserInfo from './components/UserInfo.vue'
export default {
data() {
return {
comName: 'UserName',
}
},
methods: {
},
components: {
UserName,
UserInfo,
}
}
</script>
UserName.vue
<template>
<div>
<p>用户名：<input type="text"></p>
<p>密码：<input type="password" name="" id=""></p>
</div>
</template>
<script>
export default {
}
</script>
<style scoped></style>UserInfo.vue
<template>
<div>
<p>人生格言 个人习惯</p>
</div>
</template>
<script>
export default {
}
</script>
<style scoped></style>缺点：要切换的组件很多时，要在根组件引入很多组件
组件动态不常用，组件路由更常用
组件缓存
组件切换会导致组件被频繁的销毁和重新创建，性能不高
使用vue内置的keep-alive组件，可以让包裹的组件保存在内存中不被销毁
演示：给UserName.vue 和 UserInfo.vue 注册created 和 destroyed 生命周期事件，观察创建和销毁的过程
使用 keep-alive 内置的vue组件，让动态组件缓存
语法：
Vue内置的keep-alive组件，包裹要频繁切换的组件
App.vue
<div style=" border: 1px solid red;">
<!-- vue内置的keep-alive组件，把包起来的组件缓存起来 -->
<keep-alive>
<component :is="comName"></component>
</keep-alive>
</div>
补充生命周期
activated 激活时触发
deactivated 失去激活状态触发
<template>
<div>
<p>用户名：<input type="text"></p>
<p>密码：<input type="password" name="" id=""></p>
</div>
</template>
<script>
export default {
created() {
console.log('UserName创建');
},
destroyed() {
console.log('UserName销毁');
},
// 组件缓存下 多了两个钩子函数
activated() {
console.log("activated");
},
deactivated() {
console.log("deactivated");
}
}
</script>
