[JavaScript知识库]uniapp页面传参

路由传参

index.vue

<template>
	<view>
		<view class="mian">
			<view class="sideBar">
				<view class="item" v-for="(item,index) in from.data" :key="item.id" @click="active(index)"><text class="line" v-show="item.show"></text>{{item.name}}</view>
			</view>
			<view class="category">
				<view class="fresh-message" @click="toNivgter">
					<view class="fresh-img">
						<img src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png?x-oss-process=image/resize,w_180">
					</view>
					<view class="fresh-name">
						金秋红蜜桃
					</view>
				</view>
			</view>
		</view>
		<Footer></Footer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				from : {
					data : [
						{
							id: 0,
							name : "时令鲜果",
							show : true
						},
						{
							id : 1,
							name : "海鲜水产",
							show : false
						},
						{
							id : 2,
							name : "家禽蛋",
							show : false
						},
						{
							id : 3,
							name : "地方农产",
							show : false
						},
						{
							id : 4,
							name : "百果园公司",
							show : false
						},
						{
							id : 5,
							name : "农品茗茶",
							show : false
						},
						{
							id : 6,
							name : "五谷杂粮",
							show : false
						},
						{
							id : 7,
							name : "牛羊肉",
							show : false
						}
						]
				},
				num : 0
			}
		},
		methods: {
			active(index){
				this.from.data.forEach((item)=>{
					item.show=false;
				})
				this.from.data[index].show=true;
			},
			toNivgter(){
				let obj={title:"葛乐真帅气",message:"确实啊"};
				uni.navigateTo({
					url:"../target/target"
				})
			}
		}
		
	}
</script>

<style scoped>
	.mian{
		width: 100%;
		display: flex;
	}
	.sideBar{
		width: 30%;
		height: 1200rpx;
		background-color: #f4f4f4;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 10rpx 0 0 0 ;
	}
	.item{
		width: 100%;
		height: 100rpx;
		display: flex;
		box-sizing: border-box;
		padding: 0 10rpx;
		align-items: center;
		color: #333;
		font-size: 28rpx;
		position: relative;
	}
	.line{
		width: 3px;
		height: 100%;
		background-color: red;
		position: absolute;
		left: 0px;
		top: 0px;
		transition: all .5s;
	}
	.category{
		width: 70%;
		height: 1200rpx;
		overflow: hidden;
		overflow-y: auto;
		background-color: #fff;
		box-sizing: border-box;
		padding: 0 10px;
	}
	.fresh-message{
		width: 90px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.fresh-img{
		width: 100%;
	}
	img{
		width: 100%;
	}
	.fresh-name{
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>

// target.vue
created(){
  //可以拿到我们传递过来的参数
	this.$route.query.id
}

同一页面下的兄弟传参

$emit 触发事件
$on 注册事件
$off 卸载事件
$once 注册单次事件

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖