j***@163.com
j***@163.com
  • 发布:2019-04-16 12:18
  • 更新:2020-12-14 11:13
  • 阅读:17932

uniapp动态加载组件

分类:uni-app

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

2019-04-16 12:18 负责人:无 分享
已邀请:
1***@qq.com

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

Bocheng

Bocheng

请问您这问题解决了么?怎么解决的呢?

该问题目前已经被锁定, 无法添加新回复