您好我有一種情況，我需要在運行時在一個檔案中注冊多個組件。
顯示.vue
<template>
<div>
<component v-if="currentComponent" :is="currentComponent">
</component>
</div>
</template>
<script>
import Vue from 'vue';
export default {
data(){
return{
currentComponent:null,
}
},
methods:{
load(e){
for(let key in e.components){
Vue.component(key,e.components[key]);
}
this.$nextTick(() =>{
this.currentComponent = e.components.container;
});
},
},
created(){
document.body.addEventListener('component-ready',this.load, false);
},
}
</script>
在我上面的檔案中，我希望如何加載我的組件，如下所示：
components:{
container: component Object{},
header: component Object{},
body: component Object {},
footer: component Object {},
}
這是我將事件分派到上述檔案Display.vue的方式
const event = new Event('component-ready');
event.components = {
container: component Object{},
header: component Object{},
body: component Object {},
footer: component Object {},
};
document.body.dispatchEvent(event);
執行順序：
- 事件調度組件就緒
- 檔案Display.vue中創建的 eventlisterner將呼叫
load方法
問題：在我當前的方法中，組件是全域注冊的，我想避免。我只想將所有組件注冊到Display.vue檔案
uj5u.com熱心網友回復：
要在本地動態注冊組件，您可以將組件定義復制到this.$options.components：
export default {
methods: {
load(e) {
this.$options.components = e.components ??
this.$nextTick(() => {
this.currentComponent = e.components.container
})
},
},
}
演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/491754.html
標籤：javascript Vue.js Vuejs2 Vue组件
上一篇：在檔案陣列中推送新物件
下一篇：每2秒后將影像添加到DOM