uni-app暂不支持动态组件

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app暂不支持动态组件

问题描述

<component :is="childItem.elName"  
   :style="filterCommonStyle(childItem.commonStyle)"  
   :child-item="childItem" />

我组件几十个需要动态判断，因为我们是PC端做了模板的，全用if是不是很弱鸡，希望能解决下

Harmonyos Next教程
24 回复

三年了，连个官方回复都没有


确实
10多个分类 每个分类模版不同 不可能写在一个里面

支持动态组件 真的非常有必要！！！

支持动态组件 真的非常有必要！！！

支持动态组件 真的非常有必要！！！

mark

cmponent也不支持，魔了

有解决方案了吗。。。

用taro vue2和vue3试了下, 都是可以的. 希望尽快加上!

自己写个模板，尝试使用编译指令去实现~ 编译到微信平台是，使用<template :is='' ></template> 实现同样功能

微信的 “ template ” 支持动态组件模板

支持动态组件 真的非常有必要！！！强烈推荐官方解决

用render 写可行吗

叫了2年了，支持了么？？？？

支持动态组件 真的非常有必要！！！

支持动态组件 真的非常有必要！！！

3年了，就这样了

我最近开始使用uni-app, 也遇到这个问题。支持动态组件，没想到叫了几年了。

四年了

动态主键很方便的，官方啊

4年了，还没解决，诶…

哦吼，写了一天，晚上编译到微信小程序，结果提示不支持动态组件！真实当头一棒啊

5年了还没解决

在uni-app中，虽然官方文档可能表明暂时不支持动态组件（即根据条件动态加载不同的组件），但我们仍然可以通过一些编程技巧来实现类似的功能。这里，我们可以利用Vue.js（uni-app基于Vue.js）的<component>标签和is属性来实现动态组件的效果。

以下是一个简单的代码示例，展示了如何在uni-app中实现动态组件：

<template>
  <view>
    <button @click="currentComponent = 'ComponentA'">Show Component A</button>
    <button @click="currentComponent = 'ComponentB'">Show Component B</button>
    
    <!-- 使用<component>标签和is属性实现动态组件 -->
    <component :is="currentComponent" />
  </view>
</template>

<script>
// 引入需要动态加载的组件
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';

export default {
  data() {
    return {
      // 初始显示的组件
      currentComponent: 'ComponentA'
    };
  },
  components: {
    // 注册组件
    ComponentA,
    ComponentB
  }
};
</script>

<!-- 假设ComponentA.vue和ComponentB.vue分别定义了两个简单的组件 -->

<!-- ComponentA.vue -->
<template>
  <view>
    <text>This is Component A</text>
  </view>
</template>

<script>
export default {
  name: 'ComponentA'
};
</script>

<!-- ComponentB.vue -->
<template>
  <view>
    <text>This is Component B</text>
  </view>
</template>

<script>
export default {
  name: 'ComponentB'
};
</script>

在上述代码中，我们定义了两个简单的组件ComponentA和ComponentB，并在主页面中使用<component>标签和is属性根据currentComponent的值动态加载不同的组件。通过点击按钮改变currentComponent的值，可以实现组件之间的切换。

这种方法虽然不完全等同于Vue.js中动态组件的高级特性（如keep-alive），但在uni-app中已足够满足基本的动态组件需求。如果需要更复杂的动态组件功能，可以考虑使用Vue Router结合组件懒加载来实现。不过，这通常涉及到更复杂的路由配置和组件管理，需要根据具体需求进行权衡和设计。

回到顶部