Vue Dynamic Components

យើងធ្វើ dynamic components សម្រាប់បើក page នីមួយដោយមិនបាច refresh browser

+ឧទាហរណ៍យើងបង្កើត components បានបីសម្រាប់បើកវា

File Home.vue

<template>
    <h2>Page Home</h2>
</template>

File Contact.vue

<template>
    <h2>Page Contact</h2>
</template>

File About.vue

<template>
    <h2>Page About</h2>
</template>

File App.vue

<template>
  <select v-model="conponentName">
    <option>Home</option>
    <option>Contact</option>
    <option>About</option>
  </select>

  <component :is="conponentName"></component>
</template>

<script>
  import Home from "./components/Home.vue";
  import Contact from "./components/Contact.vue";
  import About from "./components/About.vue";
  export default {
    name: "App",
    components:{
      Home,Contact, About
    },
    data(){
      return{
        conponentName: "Home"
      }
    }
  }
</script>

wrap components

ការខ្ចប់ components នៅក្នុង keep-alive នៃ element html ដើម្បីឲ្យនៅតែបង្ហាញនៅក្នុង DOM

<template>
  <select v-model="conponentName">
    <option>Home</option>
    <option>Contact</option>
    <option>About</option>
  </select>

  <keep-alive>
    <component :is="conponentName"></component>
  </keep-alive>
  
</template>