Vue.js：コンポーネントが存在するかどうかを確認してください

Question

ルートインスタンスのready:の中には、いくつかのコンポーネントが存在しない（HTMLで宣言されていない）場合にのみ行う必要があります。

コンポーネントが存在するかどうかを確認するにはどうすればよいですか？

Answer 1

私は本当にこのより良い答えがあると思いますが、現時点でこの問題を解決します。準備ができて

、私はthisを通じて子要素にアクセスする（またVueすることができる）と、その名前は私が期待したものであるかどうかを確認します

ready: function() { 

     for (var i = 0; i < this.$children.length; i++) { 
      if (
        this.$children[i].$options.name == 'my_component_a' 
       || this.$children[i].$options.name == 'my_component_b' 
       || this.$children[i].$options.name == 'my_component_c' 
      ) { 
       //do stuff 
      } 
     } 
    } 

以前ます場合にも、それらを直接アクセスすることができます //テンプレート：準備ができてVueのコンポーネントから次に

<comp v-ref:my_component_ref></comp> 

：

彼らは彼らのテンプレートで参照割り当て

if (this.$refs.my_component_ref){ 
//do stuff 
} 

Answer 2

vmが現在のVueインスタンスであるvm.$optionsで利用可能なインスタンス化オプションから、Vueインスタンスのロード済み（グローバルおよび/またはローカル）コンポーネントのリストを取得できます。

vm.$optionsプロパティは、Vueインスタンスのすべてのオプションを保持します。たとえば、vm.$options.componentsは、現在のVueインスタンスのロードされたコンポーネントを含むオブジェクトを返しますvm。

ただし、コンポーネントの登録方法によっては、Vue.component()またはlocally within a Vue instance optionsをグローバルに使用する場合は、vm.$options.componentsの構造が異なります。

コンポーネントがグローバルに登録されている場合、コンポーネントはvm.$options.components [[Prototype]]リンケージまたはその__proto__に追加されます。

コンポーネントがVueインスタンスオプション内でローカルに登録されている場合、コンポーネントはvm.$options.componentsオブジェクトに直接そのプロパティとして追加されます。したがって、コンポーネントを見つけるためにプロト・チェーンを歩かなくて済むようにします。

---

次の例では、両方の状況でロードされたコンポーネントにアクセスする方法を示します。

ローカル登録コンポーネントに関連するコードの// [1]および// [2]のコメントに注目してください。

// the globally registered component 
 
Vue.component('global-child', { 
 
    template: '<h2>A message from the global component</h2>' 
 
}); 
 

 
var localComponent = Vue.extend({ template: '<h2>A message from the local component</h2>' }); 
 

 

 
// the root view model 
 
new Vue({ 
 
    el: 'body', 
 
    data: { 
 
    allComponents: [], 
 
    localComponents: [], 
 
    globalComponentIsLoaded: false 
 
    }, 
 
    // local registered components 
 
    components: { // [1] 
 
    'local-child': localComponent 
 
    }, 
 
    ready: function() {  
 
    this.localComponents = Object.keys(this.$options.components); // [2] 
 
    
 
    this.allComponents = loadedComponents.call(this); 
 
    this.globalComponentIsLoaded = componentExists.call(this, 'global-child'); 
 
    } 
 
}); 
 

 
function loadedComponents() { 
 
    var loaded = []; 
 
    var components = this.$options.components; 
 
    for (var key in components) { 
 
    loaded.push(key); 
 
    } 
 
    return loaded; 
 
} 
 

 
function componentExists(component) { 
 
    var components = loadedComponents.call(this); 
 
    if (components.indexOf(component) !== -1) { 
 
    return true; 
 
    } 
 
    return false; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.js"></script> 
 
<h1>A message from the root Vue instance</h1> 
 
<p>All loaded components are: {{ allComponents | json }}</p> 
 
<p>local components are: {{ localComponents | json }}</p> 
 
<p><code>&lt;global-child&gt;</code> component is loaded: <strong>{{ globalComponentIsLoaded }}</strong></p> 
 
<global-child></global-child> 
 
<local-child></local-child>

Answer 3

私はあなたが動的なメソッドが必要かどうかわからないんだけど、これはコンポーネントが存在するかどうかを判断するのに役立つことがあります。

た

Vue.options.components['CompOne'] 

：

https://github.com/vuejs/Discussion/issues/140