动态组件
什么是动态组件？
- 在同一个挂载点，可以切换显示不同的组件
怎么使用动态组件？
- 使用vue内置的component组件，并使用is属性
如何切换组件
- 把is属性的值改变为所要显示的组件名
如何实现动态组件的切换？
1、先创建两个需要切换的组件。例如，UserName.vue和UserInfo.vue
<template>
<!-- UserName.vue组件 -->
<div>
用户名：<input type="text" placeholder="请输入用户名">
<br>
密码：<input type="password" placeholder="请输入密码">
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
<template>
<!-- UserInfo.vue组件 -->
<div>
个性签名: <input type="text" placeholder="个性签名">
<br>
个人介绍: <textarea placeholder="个人介绍"></textarea>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
2、创建一个父组件，引入UserName.vue和UserInfo.vue子组件，并注册
<script>
//引入组件
import UserName from "./components/UserName.vue";
import userInfo from "./components/UserInfo.vue";
export default {
data () {
return {
//定义控制切换组件的变量
comName:'UserName'
}
},
//注册
components:{
UserName,
userInfo
}
}
</script>
<style>
</style>
3、使用component标签设置动态组件的挂载点
<template>
<div>
<h1>动态组件</h1>
<button @click="comName='UserName'">账号密码</button>
<button @click="comName='userInfo'">个人信息</button>
<!-- 动态组件的挂载点 -->
<div>
<component :is='comName'></component>
</div>
</div>
</template>
组建的缓存
为什么使用组件的缓存？
- 不会频繁的创建和销毁组件，使页面加载更快
怎么样使用组件的缓存？
- 使用vue内置的keep-alive组件把需要缓存的组件包起来
例如
<template>
<div>
<h1>动态组件</h1>
<button @click="comName='UserName'">账号密码</button>
<button @click="comName='userInfo'">个人信息</button>
<!-- 动态组件的挂载点 -->
<div>
<!-- 把需要缓存的组件用keep-alive包裹起来 -->
<keep-alive>
<component :is='comName'></component>
</keep-alive>
</div>
</div>
</template>
