uni-app项目中 component is 使用时 h5生效 小程序中渲染等不支持，下面有解决方法

前言： 由于公司业务调整，特意学习下uni项目框架，其实根据官方api就是实现很多功能，其实都是一些小坑要走，下面来说一下uni-app项目中 component is 使用时 h5生效 小程序中渲染支付宝等不支持，下面有解决方法

查了下官网时这样说的

官网地址 component | uni-app官网

单个是可以使用的 <component :is="'tmp3'"></component>对我们来说没有意义

那么如何解决呢？看代码这是第一种使用<component is

<template>
  <view class="content-list">
    <view
      class="scroll-v list"
      v-for="(item,index) in showHandleList"
      :key="index"
    >
      <component
        v-if="(+item.moduleId === 3) && item.marketingInfoList && item.marketingInfoList.length > 0"
        :is="'tmp3'"
      >
      </component>
      <component
        v-if="(+item.moduleId === 4) && item.marketingInfoList && item.marketingInfoList.length > 0"
        :is="'tmp4'"
      >
      </component>
      <component
        v-if="(+item.moduleId === 5) && item.marketingInfoList && item.marketingInfoList.length > 0"
        :is="'tmp5'"
      >
      </component>
      <component
        v-if="(+item.moduleId === 6) && item.marketingInfoList && item.marketingInfoList.length > 0"
        :is="'tmp6'"
      >
      </component>
    </view>
  </view>
</template>

<script>
import tmp3 from './tmp3.vue'
import tmp6 from './tmp6.vue'
import tmp5 from './tmp5.vue'
import tmp4 from './tmp4.vue'
import { uniOpenUrl } from '@/utils/common'
export default {
  components: {
    tmp3,
    tmp4,
    tmp5,
    tmp6,
  },
  props: {
    toLearnList: {
      type: Array,
      default: () => [],
    },
    userInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
  },
  computed: {
  },
  methods: {
		
	},
}
</script>

<style scoped>

</style>

这是第二种使用 组件引用 原理都是一样，如下：

<template>
	<view class="waterflow-wrap">
		<view class="tabs-change">
				<view v-for="(tab,index) in moduleData" :key="tab.id" :class="tabIndex==index ? 'uni-tab-active' : ''" @click="ontabtapt(index)">
				</view>
			<view v-if="moduleInfoList[0].moduleId==='3'>
				<tmp3 ></tmp3>
			</view>
            <view v-if="moduleInfoList[0].moduleId==='4'>
				<tmp4 ></tmp4>
			</view>
            <view v-if="moduleInfoList[0].moduleId==='5'>
				<tmp5 ></tmp5>
			</view>
        </view>
	</view>
</template>

<script>
import tmp3 from "./tmp3.vue";
import tmp6 from "./tmp6.vue";
import tmp5 from "./tmp5.vue";
import tmp4 from "./tmp4.vue";
export default {
  components: {
    tmp3,
    tmp6,
    tmp5,
    tmp4,
  },
  props: ["userInfo", "moduleData", "chargesNo"],
  data() {
    return {
    };
  },
  mounted() {
  },
  methods: {
  },
};
</script>
<style lang="scss" scoped>
</style>

原创不易，麻烦来个赞哟 biubiubiu...