提示:
本文为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>