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

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

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

  • 前言
  • 组件
    • 组件的状态保持
      • 直接切换两个标签
      • 直接使用component组件时
      • keep-alive组件包裹的动态组件


前言

本文vue框架中组件相关。


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

组件

组件的状态保持

直接切换两个标签

DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Titletitle>
   <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>

VUE学习:vue基础23————组件:组件的状态保持_第1张图片

直接使用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>

VUE学习:vue基础23————组件:组件的状态保持_第2张图片

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>

VUE学习:vue基础23————组件:组件的状态保持_第3张图片

你可能感兴趣的:(新星计划,vue.js,vue.js)