前言： 由于公司業(yè)務調(diào)整，特意學習下uni項目框架，其實根據(jù)官方api就是實現(xiàn)很多功能，其實都是一些小坑要走，下面來說一下uni-app項目中 component is 使用時 h5生效 小程序中渲染支付寶等不支持，下面有解決方法

查了下官網(wǎng)時這樣說的

官網(wǎng)地址?component | uni-app官網(wǎng)

單個是可以使用的?<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>

原創(chuàng)不易，麻煩來個贊喲?biubiubiu...文章來源地址http://www.zghlxwxcb.cn/news/detail-532957.html

到了這里，關于uni-app項目中 component is 使用時 h5生效 小程序中渲染等不支持，下面有解決方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！