Vue.jsに動的に1つのファイルコンポーネントをマウントする方法

Question

私は単一のファイルコンポーネントを持っていますMain.Vue。

私もA.vue、B.vueとC.vue他の三つの単一ファイルのコンポーネントを持っています。

毎回Main.Vue内に別のコンポーネントを表示したいと考えています。私がしたことはこれでした：

<template> 
<div> 
<a v-if="isAVisible" ></a> 
<b v-if="isBVisible" ></a> 
</div> 
</template> 

<script> 
import A from './A.vue'; 
import B from './B.vue'; 
... 

これは私が欲しかったものですが、正確には動作しません。私は、すべてのコンポーネント、B、C ..のインポートを行い、私はメインで何とか使用することができます私のコンポーネントを、返す関数を有し、Factory.js異なるファイルを望んでいました。 vue。ここでFactory.jsのようにしようとしたもの：

import A from './A.vue'; 
import B from './B.vue'; 
function getComponent(){ 
    if (..) 
    return new A(); 
    else if (..) 
    return new B(); 
    ... 
} 

これはまったく機能しませんでした。 ので、私は工場出荷時のファイルのアプローチをしたい：私は別の工場ファイル

2にそれを分割したい

1））私は、各コンポーネントにデータを「添付」したいと思います。だから私は、実際のコンポーネント+ "名前"のようないくつかの追加データを返す関数を含むオブジェクトを持っています

どのようにこれを行うにはどのようなアイデア？

Answer 1

利用のVueのダイナミックコンポーネント

Dynamic Componentsを使用すると、コンポーネント間を動的に切り替えることができます。コンポーネント定義オブジェクトをcomponent要素のis属性にバインドする必要があります。これに関するVueのドキュメントは、かなり自明です。以下はまた、簡単な例である：

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

import componentA from 'component/a'; 
import componentB from 'component/b'; 

export default { 
    components: { 
    componentA, 
    componentB, 
    }, 

    data() { 
    return { 
     activeComponent: 'componentA', 
    }, 
    }, 
}; 

あなたが直接データプロパティ自体にコンポーネント定義オブジェクトをバインドすることができます：

import componentA from 'component/a'; 
import componentB from 'component/b'; 

export default { 
    data() { 
    return { 
     activeComponent: componentA, 
    }; 
    }, 
}; 

コンポーネントを切り替えるには、あなたがプログラムでactiveComponentの値を変更することができます。

動的実装部品のより強力な方法は、成分render functionsを使用して達成することができるレンダリング機能

を使用します。これを行うために、我々は、Vueののcomponent要素の私たち自身のバージョンを作成しなければなりません - 私たちは、このElementProxyを呼ぶことにします：

import componentA from 'component/a'; 
import componentB from 'component/b'; 

export default { 
    components: { 
    componentA, 
    componentB, 
    }, 

    props: { 
    type: { 
     type: String, 
     required: true, 
    }, 
    props: { 
     type: Object, 
     default:() => ({}), 
    }, 
    }, 

    render(createElement) { 
    const { props: attrs } = this; 
    return createElement(element, { attrs }); 
    }, 
}; 

あなたは今、プロキシ要素にElementProxyを使用することができます。これの利点は、異なるモデルを持つ動的コンポーネントに小道具を渡すという問題を解決するオブジェクトとして小道具を渡すことができることです。

<template> 
    <element-proxy :type="activeComponent" :props="props"></element-proxy> 
</template> 

import ElementProxy from 'components/elementProxy'; 

export default { 
    components: { 
    ElementProxy, 
    }, 

    data() { 
    return { 
     activeComponent: 'componentA', 
     props: { ... }, 
    }; 
    }, 
}; 

さらに読み

• Vue's documentation for dynamic components
• Vue's documentation for the render function
• GitHub issue thread for binding props

Answer 2

はい、あなたが動的コンポーネントが必要です。

<template> 
    <div> 
    <component v-bind:is="currentView"> 
    <!-- component changes when vm.currentView changes! --> 
    </component> 
    </div> 
</template> 

<script> 
import A from './A.vue'; 
import B from './B.vue'; 

export default { 
    data: { 
    currentView: 'A' 
    }, 
    components: { 
    A, 
    B, 
    } 
}) 

を、その後

function getComponent(){ 
    if (..) 
    this.currentView = 'A'; 
    else if (..) 
    this.currentView = 'B' 
    ... 
} 

あなたはまた、マニュアルに従って、直接コンポーネントをバインドすることができます。

https://vuejs.org/v2/guide/components.html#Dynamic-Components