Vue動的登録コンポーネントの実例コードの詳細
本論文を書く前に、実際にvueの中の一つのダイナミックコンポーネントisをロードするAPIについても注目しました。最初に研究したのは、tabスイッチの機能を実現するためだけで、使うのもいいです。
is
予想:string_Object(コンポーネントのオプションオブジェクト)
動的コンポーネントのために使用され、DOM内のテンプレートの制約に基づいて動作する。
例:
tabスイッチに使うと、大体:
本当にだめなら、
資料を調べたところ、vueにはextedの方法があります。このexted方法は一体何ですか?
ただ、extedは具体的なコンポーネントの例ではなく、コンポーネントのコンストラクタを作成したので、彼は直接にnew Vueでは使用できません。
Vue.extedを用いて作成されたコンポーネントコンストラクタは最終的に
次に、
締め括りをつける
以上述べたのは小编が皆さんに绍介したvue动态登录コンポーネントの実例コードの详しい解です。皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに皆さんに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。
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动态登录コンポーネントの実例コードの详しい解です。皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに皆さんに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。