VUE学习：vue基础23————组件：组件的状态保持

最新推荐文章于 2024-08-03 00:11:32 发布

北凉冬

最新推荐文章于 2024-08-03 00:11:32 发布

阅读量603

点赞数

分类专栏：新星计划 vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/GAlbinus/article/details/117412721

版权

vue.js 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

新星计划

15 篇文章 0 订阅

订阅专栏

提示：
本文为VUE栏目：VUE学习：vue基础23————组件：组件的状态保持

VUE学习：vue基础23————组件：组件的状态保持

前言
组件
- 组件的状态保持

前言

本文vue框架中组件相关。

提示：以下是本篇文章正文内容，下面案例可供参考

组件

组件的状态保持

直接切换两个标签

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="vue.js"></script>
</head>
<body>
<div id="app">
   <div>
      <button type="button" @click="isPhone=!isPhone">{{isPhone?'手机登录':'用户名登录'}}</button>
      <input type="text" v-if="isPhone" key="phone" placeholder="请输入手机号码">
      <input type="text" v-else key="username" placeholder="请输入用户名">
   </div>
</div>

</body>
<script>
   let vm = new Vue({
      el: "#app",
		data: {
			isPhone:true,
		},
		methods: {},
   });
</script>
</html>

在这里插入图片描述

直接使用component组件时

组件切换会把切换掉的组件彻底销毁，所以被切换掉的组件中的值都会一起消失

<body>
<div id="app">
	<div>
		<!---->
		<button type="button" @click="view='phone'">手机登录</button>
		<button type="button" @click="view='username'">用户名登录</button>
		<div>
			<component :is="view"></component>
		</div>
	</div>
</div>
<template id="tempA">
	<input type="text" name="username" placeholder="请输入用户名">
</template>
<template id="tempB">
	<input type="text" name="phone" placeholder="请输入手机号">
</template>
</body>
<script>
	let vm = new Vue({
		el: "#app",
		data: {
			view:'phone',
		},
		methods: {},
		components:{
			phone:{
				template:"#tempB"
			},
			username:{
				template: "#tempA"
			}
		}
	});
</script>

在这里插入图片描述

keep-alive组件包裹的动态组件

在进行组件切换的时候，被切换掉的组件不会被销毁，而是被存入内存，被切换的组件的值是可以被保存下来的

<body>
<div id="app">
	<div>
		<button type="button" @click="com='phone'">手机登录</button>
		<button type="button" @click="com='username'">用户名登录</button>
		<div>
			<!---->
			<keep-alive>
				<component :is="com"></component>
			</keep-alive>
		</div>
	</div>
</div>
<template id="tempA">
	<input type="text" name="username" placeholder="请输入用户名">
</template>
<template id="tempB">
	<input type="text" name="phone" placeholder="请输入手机号">
</template>
</body>
<script>
	let vm = new Vue({
		el: "#app",
		data: {
			com:'phone'
		},
		methods: {},
		components:{
			phone:{
				template:"#tempB"
			},
			username:{
				template: "#tempA"
			}
		}
	});
</script>