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