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>

頁面效果

點擊切換