小程序中自定义组件使用vant-weapp组件

引入使用后h5可能会有报错及无法正常显示,小程序中正常显示使用及无报错
使用uniapp写代码运行到微信开发者工具,由微信开发者工具自动编译

自定义组件中使用uniapp的扩展组件 uni-icons

components中
//1-自定义组件
<template>
	<view class="top-nav-bar">
		//1.3 使用组件
		<uni-icons type="arrowleft" size="20" color="#fff"></uni-icons>
		<slot name="conton"></slot>
		<slot name="right"></slot>
	</view>
</template>

<script>
	//1.1 引入uniapp扩展组件
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
	//1.2 注册组件
		components:{
			uniIcons
		}
	}
</script>

pages中
//2-使用自定义组件
<template>
	<view class="">
		//1.3 使用组件
		<navigateback></navigateback>
	</view>
</template>
<script>
	//1.1 引入自定义组件
	import navigateback from '@/components/navigateback.vue'
	export default {
	//1.2 注册组件
		components:{
			navigateback
		}
	}
</script>

自定义组件中使用vant-weapp的组件 card

components中
//1-自定义组件
<template>
	<view class="goods-card">
		<vanCard :price="price" :title="title" :thumb="thumb" >	
			<view slot="num"> //外层是vant组件官方定义插槽,使用见官方文档
				<slot name="num"></slot>//里面是自己定义的具名插槽,name自定在页面使用对应该name
			</view>
			<view slot="tag">//同上
				<slot name="tag"></slot>
			</view>
			<view slot="desc">//同上
			  <slot name="desc"></slot>
			</view>
			<view slot="price-top">//同上
				<slot name="price-top"></slot>
			 </view>
			 <view slot="price">//同上
			 	<slot name="price"></slot>
			  </view>
			 <view slot="origin-price">//同上
				<slot name="origin-price"></slot>	
			 </view>
		</vanCard>
	</view>
</template>

<script>
	//1.1 引入vant-weapp组件
	//(路径只需要到组件目录名,如"@/wxcomponents/vant/card/card.vue"则报错无法使用)
	import vanCard from "@/wxcomponents/vant/card"
	export default {
	//1.2 注册组件
		components:{
			vanCard 
		}
	}
</script>

pages中
//2-使用自定义组件
<template>
	<goodsCard v-for="el in data" 
		:price="el.price" 
		:title="el.name" 
		:thumb="'https://img.yzcdn.cn/vant/ipad.jpeg'" 
	>
		<!-- 商品原价 -->
		<template slot="price-top">
			￥{{el.price}}
		</template>
		<!-- 商品所需积分 -->
		<template slot="origin-price">
			{{el.proportion}}积分
		</template>
			 <!-- 按钮 -->
		<template slot="num" >
			{{el.num}}
		</template>
	</goodsCard>
</template>
<script>
	//1.1 引入自定义组件
	import goodsCard from '@/components/goods_card.vue'
	export default {
	//1.2 注册组件
		components:{
			goodsCard
		}
	}
</script>