Vue動的登録コンポーネントの実例コードの詳細

本論文を書く前に、実際にvueの中の一つのダイナミックコンポーネントisをロードするAPIについても注目しました。最初に研究したのは、tabスイッチの機能を実現するためだけで、使うのもいいです。
is
予想：string＿Object（コンポーネントのオプションオブジェクト）
動的コンポーネントのために使用され、DOM内のテンプレートの制約に基づいて動作する。
例:

<!--   `currentView`    ，        -->
<component v-bind:is="currentView"></component>

詳細はvue APIにおけるisの定義と使い方を参照してください
tabスイッチに使うと、大体：

<template>
 <div>
 　　<div>#      tab    #</div><br><br><br>
 　　　　<nav>
 　　　　　　<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="toggleTabs(first);">{{first}}</a>
   　 　　<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="toggleTabs(second);">{{second}}</a>
   　　　 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="toggleTabs(third);">{{third}}</a>
 　　　　</nav>

　　　　　<first :is="currentView" keep-alive></first>
　　 </div>
</template>

<script>
import first from 'components/first';
import second from 'components/second';
import third from 'components/third';

export default {
  data () {
    return {
     first: "first",
    second: "second",
    third: "third",
    currentView: 'first',
    };
   },
   components: { 
    first,
    second,
    third
   },
   methods: {
    toggleTabs (tabText) {
     this.currentView = tabText;
    }
   }
 }
</script>

しかし、今日は、フロントエンドがグループの中で「現在のページが、パラメータによって異なるコンポーネントが表示されます。しかも、現在のページでは、importが数十個のサブアセンブリに入るかもしれません。一つ一つimportに行きたくないです。また、これらのグループは必要に応じてロードされます。どうやって実現されますか？」実は、最初は私も愚かでした。
本当にだめなら、const demo = () => import ( './demo.vue')，またはコンポーネントのcomponents:に必要に応じて導入すると思います。

components: {
 demo: () => import ( './demo.vue')
}

しかし、そうではないと思います。必要に応じてロードすることができますが、一つ一つのimportのようなコンポーネントが必要です。まだ実際の問題は解決されていません。
資料を調べたところ、vueにはextedの方法があります。このexted方法は一体何ですか？Vue.extend( options )Vue.extedが戻ってきたのは、一部のオプションを設定したVueインスタンスビルダーです。よくVue.com mponentにサービスを提供してコンポーネントを生成していますが、テンプレートでラベルとしてのコンポーネント名に出会うと、自動的に「拡張インスタンスビルダー」を呼び出してコンポーネントのインスタンスを生成し、ユーザー定義要素にマウントするということが分かります。
ただ、extedは具体的なコンポーネントの例ではなく、コンポーネントのコンストラクタを作成したので、彼は直接にnew Vueでは使用できません。
Vue.extedを用いて作成されたコンポーネントコンストラクタは最終的にVue.componentsを介してグローバルコンポーネントまたはnewの実装に登録され、ローカルコンポーネントとして登録されることができる。
次に、Vue.extendとVue.componentsを使用してグローバルコンポーネントを登録することを実現する。

import Vue from 'vue';

const globalComponent = Vue.extend({
 template:"<p><a :href='url'>{{nama}}</a></p>",
 data:function(){
  return{
   nama:'  ',
   url:'http://www.moudu.com'
  }
 }
});

Vue.component('globalComponent', globalComponent);

このグローバルに登録されたコンポーネントを使用します。

<template>
 <globalComponent />
</template>

グローバルコンポーネントを登録するのはまだ簡単です。次に、異なるコンポーネントを参照によってロードする方法を実現します。

<template>
 <button type="button" @click="toggle('test')">      <button>
 <p><div ref="currentView"></div>
</template>

<script>
import Vue from 'vue'

export default {
 data(){
 return {}
 },
 methods: {
 toggle(componentName){
  this.registerComponent(componentName).then(Component => {
  // new Component().$mount(this.$refs.currentView)

  new Component({
   el: this.$refs.currentView
  })
  })
 },
 registerComponent(componentName) {
  return import(`@/views/${componentName}.vue`).then(component => {
  return Vue.extend(component.default);
  });
 }
 },
}
</script>

このように、動的に流入したパラメータに基づいて、異なるコンポーネントをimport( @/views/${componentName}.vue )でロードすることができ、importにはフィードバックの方法があることに注意して、このフィードバックではVue.extend(component.default)を使用してコンポーネントの構築器を作成し、newキーワードによって局登録コンポーネントを実現することができる。
締め括りをつける
以上述べたのは小编が皆さんに绍介したvue动态登录コンポーネントの実例コードの详しい解です。皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに皆さんに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。