# `vm.$options`

# Vue 真正的實體

import Vue from 'vue';

export default {
  name: 'App',
  mounted() {
    console.log(Vue.options);
  },
};

1
2
3
4
5
6
7
8

這個 Vue 其實是一個沒有被初始化的元件實體，你可以把他想成是 Vue 元件的地基，所有的 Vue 元件都是根據這個地基而來的。但，由於 App 是你使用 new Vue 所產生出來的，所以，在這個地方就不會包含 App 或是你往後所使用的任何元件

import Vue from 'vue'; // 這裡就是所謂的「那個」Vue

export default {
  name: 'App',
};

1
2
3
4
5

而在main.js中就會有 全域 的相關設定。那麼，我們就能夠從這邊，去拿到一些，使用全域設定所綁定進來的東西，就上面的結構來看，會有元件、自訂指令以及過濾器。那麼，利用這一點，我們就可以從 Vue.options 裡面的資料來做一些事情

# 全域動態載入

/extends/components

import HelloKitty from '@/components/HelloKitty.vue';
import HelloWorld from '@/components/HelloWorld.vue';

Vue.component('HelloKitty', HelloKitty);
Vue.component('HelloWorld', HelloWorld);

1
2
3
4
5

App.vue

透過 :is 的方法來做到元件替換

<div id="app" class="app">
  <!--下拉動態選擇-->
  <select v-model="myComponent">
    <option v-for="item in select" :key="item">
      {{ item }}
    </option>
  </select>
  <div :is="loadedComponent" />
</div>
<script>
  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: {
      // 將 components 名放入下拉中
      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));
      },
    },
  };
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

main.js

import Vue from 'vue';
import App from './App.vue';

require('./extends/myComponent.js');

new Vue({
  render: (h) => h(App),
}).$mount('#app');

1
2
3
4
5
6
7
8

# 參考

Component 魔術方法 (opens new window)

← vm.$watch 組件系統的特性 →

# vm.$options

# Vue 真正的實體

# 全域動態載入

# 參考

# `vm.$options`