按名称和属性盲动态加载 vuejs 组件 [英] Blind dynamic load vuejs component by name with properties
问题描述
我想在 vuejs CLI 中动态加载组件作为单个文件组件，在ajax请求之前，我不知道会加载哪个组件，页面加载时我无法加载150个组件.
这是一个ajax响应的例子:
<预><代码>[{is="Title", text:"Hello World"},{is:"Status", type:"info", text:"看看这些漂亮的照片"},{is:"Carousel", imgs:["/img/1.jpg","/img/2.jpg","/img/3.jpg"]},{is:"Status", type:"alert", text:"这些图片是创作者的财产"},]我想要一个渲染如下的 vue 组件:
<component is="Title" text="Hello World"/><component is="Status" type="info" text="看看这些漂亮的照片"/><component is="Carousel" imgs="['/img/1.jpg','/img/2.jpg','/img/3.jpg']"/><component is="Status" type="alert", text="这些图片是创作者的财产"/></模板><脚本>从'@/components/libs/Title.vue'导入标题从@/components/libs/Status.vue"导入状态从'@/components/libs/Carousel.vue' 导入 Carousel导出默认{成分: {标题，地位，旋转木马},}App.vue
<div id="应用程序"><DynamicComponentSet :definition="response"/></模板><脚本>从@/components/DynamicComponentSet"导入 DynamicComponentSet；导出默认{名称:应用程序"，成分: {动态组件集},数据() {返回 {回复: [{ is: "Title", text: "Hello World" },{ is: "Status", type: "info", text: "看看这些漂亮的照片" },{ is: "Carousel", imgs: ["/img/1.jpg", "/img/2.jpg", "/img/3.jpg"] },{是:状态"，类型:警报"，text: "这些图片是创作者的财产"}]};}};
DynamicComponentSet.vue
<div><component v-for="(comp, index) in definition" :key="index" v-bind="comp" :is="comp.is"/></模板><脚本>导出默认{name: "动态组件集",成分: {标题:() =>import("@/components/Title.vue"),状态:() =>import("@/components/Status.vue"),轮播:() =>import("@/components/Carousel.vue")},道具: {定义:数组}};
注意 1:必须在 components 中指定所有可能的 is 值.组件按需加载(异步组件).
注意 2:所有单独的 response 对象的属性都通过 v-bind="comp" 使用 props as a object 语法，因此数据属性名称/类型必须匹配每个组件道具....
注意 3::is="comp.is" 实际上不需要让它工作，因为 is 与其他 props 一起传递.我补充说只是为了让 ESLint 开心......
I would like to do dynamic loading of component in vuejs CLI as a single file component, before the ajax request, I don't know which component will be loaded and I can't load 150 component at page load.
Here an example of the ajax response :
[
{is="Title", text:"Hello World"},
{is:"Status", type:"info", text:"Look at these beautiful photos"},
{is:"Carousel", imgs:["/img/1.jpg","/img/2.jpg","/img/3.jpg"]},
{is:"Status", type:"alert", text:"These images are the property of the creator"},
]
I would like to have a vue component that render like this:
<template>
<component is="Title" text="Hello World"/>
<component is="Status" type="info" text="Look at these beautiful photos"/>
<component is="Carousel" imgs="['/img/1.jpg','/img/2.jpg','/img/3.jpg']"/>
<component is="Status" type="alert", text="These images are the property of the creator"/>
</template>
<script>
import Title from '@/components/libs/Title.vue'
import Status from '@/components/libs/Status.vue'
import Carousel from '@/components/libs/Carousel.vue'
export default {
components: {
Title,
Status,
Carousel
},
}
</script>
App.vue
<template>
<div id="app">
<DynamicComponentSet :definition="response"/>
</div>
</template>
<script>
import DynamicComponentSet from "@/components/DynamicComponentSet";
export default {
name: "App",
components: {
DynamicComponentSet
},
data() {
return {
response: [
{ is: "Title", text: "Hello World" },
{ is: "Status", type: "info", text: "Look at these beautiful photos" },
{ is: "Carousel", imgs: ["/img/1.jpg", "/img/2.jpg", "/img/3.jpg"] },
{
is: "Status",
type: "alert",
text: "These images are the property of the creator"
}
]
};
}
};
</script>
DynamicComponentSet.vue
<template>
<div>
<component v-for="(comp, index) in definition" :key="index" v-bind="comp" :is="comp.is"/>
</div>
</template>
<script>
export default {
name: "DynamicComponentSet",
components: {
Title: () => import("@/components/Title.vue"),
Status: () => import("@/components/Status.vue"),
Carousel: () => import("@/components/Carousel.vue")
},
props: {
definition: Array
}
};
</script>
Note 1: all possible is values has to be specified here in components. Components are loaded on demand (async components).
Note 2: All individual response object's properties are passed into individual components with v-bind="comp" using props as an object syntax so data properties names/types must match to each component props....
Note 3: :is="comp.is" is actually not needed to make it work because is is passed along with other props. I added that just to make ESLint happy...
这篇关于按名称和属性盲动态加载 vuejs 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
