Vue入门基础（动态组件和缓存）

components 指定引用的组件，可以通过修改指定的组件名称来动态改变显示的组件

keep-alive 组件加入缓存 使组件切换的时候 不会重新渲染覆盖已填数据

 

Formone.vue

<template >
    <div class="Formone">
        <h1>我是Formone</h1>
        <form action="">
            <div>输入xxx</div>
            <div><input type="text" value=""></div>
            <div>输入文本</div>
            <div><textarea name="" id="" cols="30" rows="10"></textarea></div>
        </form>
    </div>
</template>

<script>
//js 逻辑部分
export default {
  name: 'Formone',
  data() {
     return {
    };
  }
}
</script>

<style scoped>

</style>

Formtow.vue

<template >
    <div class="Formtow">
        <h1>我是Formtow</h1>
        <form action="">
            <div>输入xxx</div>
            <div><input type="text" value=""></div>
             <div>输入xxx</div>
            <div><input type="text" value=""></div>
            <div>输入文本</div>
            <div><textarea name="" id="" cols="30" rows="10"></textarea></div>
        </form>
    </div>
</template>

<script>
//js 逻辑部分
export default {
  name: 'Formtow',
  data() {
     return {
    };
  }
}
</script>

<style scoped>

</style>

App.vue

<template>
  <div id="app">
     <!-- keep-alive 组件加入缓存 使组件切换的时候 不会重新渲染覆盖已填数据-->
    <keep-alive>
      <!-- components 指定组件  可以是动态的属性-->
      <components :is="fomename"></components>
    </keep-alive>

    <button @click="fomename ='form-one' ">显示form-one</button>
    <button @click="fomename ='form-tow' ">显示form-tow</button>
  </div>
</template>

<script>
//注册局部组件
import Formone from './components/Formone.vue'
import Formtow from './components/Formtow.vue'

//1 引入组件
export default {
  name: 'app',
  components: { //2 注册组件
    "form-one":Formone,  //给组件一个名字
    "form-tow":Formtow
  },
  data(){
    return{
       fomename:"form-tow"
    };
  },
  methods:{
    
  }
}
</script>

<style>


</style>

页面效果

点击切换