uni-app自定义组件模板块

作者:Jasmine - 2020年07月10日

组件模板: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 许可协议。转载请注明出处!


 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚!