uni-app自定义组件模板块

组件模板：goods-list.vue

<template>
	<view class="goods_list">
		<view @click="navigator(item.id)" class="goods_item" v-for="item in goods" :key="item.id">
			<image :src="item.img_url"></image>
			<view class="price">
				<text>￥{{item.sell_price}}</text>
				<text>￥{{item.market_price}}</text>
			</view>
			<view class="goods_name">
				{{item.title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['goods'],
		methods:{
			navigator(id){
				this.$emit('GoodsDetail',id)
			}
		}
	}
</script>

index页面使用：

<view class="hot_goods">
    <view class="tit">
    推荐商品
    </view>
    <goods-list @GoodsDetail="goGoodsDetail" :goods="goods"></goods-list>
</view>

<script>
import goodsList from '../../components/goods-list/goods-list.vue'
export default {
    data() {
        return {
            goods: [],
        }
    },
    methods: {
        goGoodsDetail(id) {
            uni.navigateTo({
            	url: '/pages/goods_detail/goods_detail?id=' + id
            })
        }
    }
  }
</script>

主要注意地方：

1。组件中的列表数组：goods，因为要在页面中使用的数组，所以要在组件中设置：props: ['goods'],然后在页面中使用:goods="goods"；

2。组件中的方法：跳转的方法：@click="navigator(item.id)"，在组件的方法中声明：navigator(id){this.$emit('GoodsDetail',id)}，引号里面的定义就是在页面中使用的声明来的。页面中使用@GoodsDetail="goGoodsDetail"这种方式去使用。

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/667

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！