Cacher is the code snippet organizer for pro developers

參考Vue.option

Vue option

動態載入

• 全域component

  將index.js放於component extends資料夾下

  import Vue from 'vue'
  import HelloKitty from '@/components/HelloKitty.vue'
  import Halloween from '@/components/Halloween.vue'
  
  Vue.component('HelloKitty', HelloKitty)
  Vue.component('Halloween', Halloween)
  

• App.vue

  <div id="app" class="app">
    <select v-model="myComponent">
      <option v-for="item in select" :key="item">
        {{ item }}
      </option>
    </select>
    <div :is="loadedComponent" />
  </div>
  

  export default {
    name: 'App',
    data() {
      return {
        // default component
        myComponent: 'HelloKitty',
        // 載入的component
        loadedComponent: null,
        select: []
      }
    },
    watch: {
      myComponent: {
        immediate: true,
        handler(newVal) {
          if (this.$options.components[newVal]) {
            this.loadedComponent = this.$options.components[newVal]
          }
        }
      }
    },
    mounted() {
      this.getPrototype(this.$options.components)
    },
    methods: {
      // 將component名放入下拉中
      getPrototype(obj) {
        // 找是否有自己的屬性
        if (Object.getOwnPropertyNames(obj).length === 0) return // recursive approach
        Object.getOwnPropertyNames(obj).forEach(name => {
          // this.$options.name為 App
          if (name !== this.$options.name) this.select.push(name)
        })
        this.getPrototype(Object.getPrototypeOf(obj))
      }
    }
  }
  

• main.js

  // 載入全域 component，用於動態顯示
  require('@/component extends')