目录动态组件格式注意点使用效果目录结构操作效果小结keep-alive组件使用背景解决方法使用keep-alive组件小结keep-alive组件-指定缓存语法注意:总结动态组件 多
多个组件使用同一个挂载点,并可以动态切换,这就是动态组件。
<component :is="comName"></component>
需求: 完成一个注册功能页面, 2个按钮切换, 额外封装两个组件:一个填写注册信息, 一个填写用户简介信息。
根组件
├── App.Vue
└── components
├── UserName.vue # 用户名和密码输入框
└── UserInfo.vue # 人生格言和自我介绍框
UserName.vue
<template>
<div>
<h2>UserName</h2>
<p>用户名:<input /> </p>
<p>密码:<input /> </p>
</div>
</template>
<script>
export default {
}
</script>
UserInfo.vue
<template>
<div>
<h2>UserInfo.vue</h2>
<p>人生格言:<input /> </p>
<p>自我介绍:<textarea /> </p>
</div>
</template>
<script>
export default {
}
</script>
父组件APP.vue
<template>
<div>
<button @click="comName = 'UserName'">账号密码填写</button>
<button @click="comName = 'UserInfo'">个人信息填写</button>
<p>下面显示注册组件:</p>
<div style="border: 1px solid red">
<!-- vue内置的组件component, 可以动态显示组件 -->
<component :is="comName"></component>
</div>
</div>
</template>
<script>
import UserName from "./UserName";
import UserInfo from "./UserInfo";
export default {
data() {
return {
comName: "UserName",
};
},
components: {
UserName,
UserInfo,
},
};
</script>
vue内置component
组件, 配合is属性, 设置要显示的组件标签名字。
组件切换会导致组件被频繁销毁和重新创建, 大多数情况下是有自己的意义的,但也可能会导致不必要的性能损耗。
使用Vue内置的keep-alive
组件, 可以让包裹的组件保存在内存中不被销毁。
<keep-alive>
<!-- vue内置的组件component, 可以动态显示组件 -->
<component :is="comName"></component>
</keep-alive>
使用keep-alive
组件会补充两个生命周期:
keep-alive
可以提高组件的性能, 内部包裹的标签不会被销毁和重新创建, 触发激活和非激活的生命周期方法。
keep-alive
默认会将所有包裹的组件进行缓存,使用include
属性可以指定缓存组件。
<keep-alive include="name1,name2">
<!-- vue内置的组件component, 可以动态显示组件 -->
<component :is="comName"></component>
</keep-alive>
匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。
到此这篇关于Vue动态组件和keep-alive组件的文章就介绍到这了,更多相关Vue动态组件 keep-alive组件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue动态组件和keep-alive组件实例详解
本文链接: https://www.lsjlt.com/news/148599.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0