uniapp动态加载组件

分类：uni-app

动态加载组件组件

如何根据后台返回数据动态加载组件

2019-04-16 12:18 负责人:无分享

3 个回复

1***@qq.com - 码龙

可以现在main.js中引入组件

import fixWidown from 'components/fix-window/fix-window.vue'  
Vue.component("fix-widown",fixWidown)

之后再调用页面中

    <component :query="query" v-bind:is="currentTabComponent" @method="getMethod"></component>


   data(){  
    return {  
        query:[1,2,3,4,5,{1:1}], //这里的query是传递给组件内的数据  
    currentTabComponent: 'fix-widown',}  
  },  
methods:{  
    getMethod(e){  
         console.log('这是子组件传递过来的方法')  
    }  
}  

···

Bocheng

<button @click="test">测试</button>

test(){

console.log("点击了测试");

this.$emit('method');

}

子页面这样写会报错

2020-12-14 11:31
Bocheng

请问子页面该怎么写呢

2020-12-14 11:31
1***@qq.com

回复 Bocheng: 记得传不传参数，需要保持一致’

2020-12-14 15:26

1***@qq.com

this.$emit('method');

<xxxx @method="getmethod"></xxxx>

2020-12-14 15:27

5***@qq.com

fix-window 这个是官方的组件吗还是自定义的

2021-01-06 15:25
superMiao

如果我想在 import的时候根据后台数据动态更改组件路径呢？()=>import(./template${this.path})这样写一直不成功

2021-07-01 14:13
一抱一个胖猪猪

如果有100个组件，难道100个组件都要在main.js里引入？

2022-01-09 23:52

白羽 - 个人开发者

使用v-for。数组的元数的个数将决定加载的组件的个数。改数组元素和元素的个数即可。

j***@163.com (作者)

怎么根据不同的返回字段加载不同的组件呢

2019-04-16 14:38
白羽

可以使用条件渲染。

<template v-if="dataType==='text'">

<text>....</text>

</template>

<template v-if="dataType==='view'">

<view>....</view>

</template>

2019-04-16 17:45
7***@qq.com

回复白羽: 如果100个组件呢我们组件太多了这个全都有v-if？

2020-05-28 09:34
楠得有你

回复 7***@qq.com: 请问现在问题解决了吗

2020-11-23 12:44
3***@qq.com

大佬 v-for和v-if不能动态控制渲染的顺序啊有什么解决方案或者思路吗

2020-12-25 14:50
Meiwah

回复 3***@qq.com: 利用flex布局的order属性

2021-05-24 13:54
1***@qq.com

回复 Meiwah: 完美解决展示顺序的问题赞赞赞！！！

2021-07-26 11:00
6***@qq.com

回复 Meiwah: 牛逼完美解决

2021-09-19 15:33
wanghexu

回复 Meiwah: 兄弟，你怎么那么牛？

2022-04-15 17:05