uniapp得自定义组件--组件传值

自定义组件

//子组件
<template>
	<view class="list">
		<view class="list_list" v-for="(item,key) in list" :key="key"
		//跳转路径
		 @click="Tip(item.path)">
			<image :src="item.imgUrl" mode=""></image>
			<text>{{item.title}}</text>
			<text class="iconfont icon-arrow-right list_text"></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		//props接收父组件传递得数据
		props: {
			list: {
				type: Array,
				value: []
			}
		},
		methods: {
		//点击跳转到指定路径
			Tip(path) {
				uni.navigateTo({
					url: `${path}`
				})
			}
		}

	}
</script>

<style>
	.list_text {
		position: absolute;
		right: 10rpx;
		font-size: 24px;
	}

	.list {
		margin-top: 40rpx;
	}

	.list_list {
		display: flex;
		align-items: center;
		height: 100rpx;
		font-size: 30rpx;
		padding: 25rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #ddd;
	}

	image {
		width: 45rpx;
		height: 45rpx;
		margin: 3%;
	}
</style>

//父组件
<template>
	<view>
		<!-- 四宫格 -->
		<fouerTable :fouerTable="fouerTable"></fouerTable>
		<!-- 列表 -->
		<list :list="list"></list>
	</view>
</template>

<script>
	import list from '../../components/list.vue'
	import fouerTable from "../../components/fourTable.vue";
	export default {
		components: {
			fouerTable,
			list
		},
		data() {
			return {
				fouerTable: [{
						iconUrl: require('../../static/image/member-icon1.png'),
						title: "待付款",
						path: "/components/money"
					},
					{
						iconUrl: require('../../static/image/member-icon2.png'),
						title: "待收货",
						path: "/components/Two"
					},
					{
						iconUrl: require('../../static/image/member-icon3.png'),
						title: "待评价",
						path: "/components/Three"
					},
					{
						iconUrl: require('../../static/image/member-icon4.png'),
						title: "全部订单",
						path: "/components/Four"
					}
				],
				list: [{
						imgUrl: require('../../static/image/member-menu1.png'),
						title: "收获地址",
						path: "/components/five"
					},
					{
						imgUrl: require('../../static/image/member-menu2.png'),
						title: "在线客服"
					},
					{
						imgUrl: require('../../static/image/member-menu3.png'),
						title: "邀请有礼"
					},
					{
						imgUrl: require('../../static/image/member-menu4.png'),
						title: "关于我们"
					}
				]
			};
		}
	}
</script>

<style>
	/* header */
	.header_logo {
		width: 100%;
		height: 70px;
		background-image: url(../../static/image/member-top.png);
		background-size: 100% 100%;
	}

	.header_nav {
		display: flex;
	}

	.header_left {
		flex: 1;
		font-size: 12px;
		color: #fff;
		height: 70rpx;
		padding: 20px 62px;
		box-sizing: border-box;
	}

	.header_bottom {
		margin-bottom: 6px;
	}

	.header_right {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 25px;
		height: 70px;
	}

	.header_Image {
		width: 20px;
		height: 20px;
	}

	/* 退出 */
	.btn{
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}
</style>

效果展示