uniapp页面和组件传递参数

页面

template

<template>
    <view class="container">
		<!--组件-->
		<view class="model">
			<view>
				<demo-list
				:commentList="commentList" @son-fun="goDetil"></demo-list>
			</view>
		</view>
		<!--页面-->
		<view>
			<view class="title">
				页面
			</view>
			<view class="item" v-for="(item,index) in commentList"
			:data-id="item.id"
			:data-index="index"
			@tap="click"
			>
				<view class="flex-l">
					<view>{{item.id}}</view>
					<view>{{item.title}}</view>
					<view>
						<block v-if="item.hasChange == true">1</block>
						<block v-else-if="item.hasChange == false">0</block>
					</view>
				</view>
				<view>〉</view>
			</view>
		</view>
    </view>
</template>

要点：:commentList=“commentList”是页面向组件参数赋值，@son-fun=”goDetil”是组件调用页面的方法。
script

import demoList from '../../common/mask/demo.vue';
export default{
	components:{
		'demo-list':demoList,	//注册子组件
	},
	data(){
	   return {
			commentList:[
				{id:1,title:"地下城与勇士",hasChange:false},
				{id:2,title:"英雄联盟",hasChange:false}
			]
		}
	},
	onLoad() {
		
	},
	methods:{
		goDetil(val){
			console.log("页面接收组件数据");
			// console.log(val);
			var index = val.index;
			var id = val.id;
			
			if(this.commentList[index].hasChange == true){
					
				this.commentList[index].hasChange = false;
			}else{
					
				this.commentList[index].hasChange = true;
			}
		},
		click:function(e){
			console.log("页面→组件→数据")
			// console.log(e);
			var index = e.currentTarget.dataset.index;
			var id = e.currentTarget.dataset.id;
				
			if(this.commentList[index].hasChange == true){
					
				this.commentList[index].hasChange = false;
			}else{
					
				this.commentList[index].hasChange = true;
			}
			
		}
	}
}

style

.model{
	border-bottom: 1upx solid red;
	margin: 30upx 0;
}
.container{
	padding: 20upx 34upx;
}
.title{
	font-size: 34upx;
	color: #666;
	font-weight: 600;
	text-align: center;
}
.item{
	font-size: 24upx;
	color: #8799a3;
	padding: 20upx 0;
	border-bottom: 1px solid #eee;
	display: flex;
	justify-content: space-between;
	-webkit-box-align: center;
}
.flex-l{
	display: flex;
	justify-content: flex-start;
}
.flex-l view{
	margin-right: 20upx;
}

组件

template

<template>
    <view class="page">
		<view class="container">
			<view class="title">{{title}}</view>
			<view class="item" v-for="(item,index) in commentList"
			@tap="click"
			:data-index="index"
			:data-id="item.id"
			>
				<view class="flex-l">
					<view>{{item.id}}</view>
					<view>{{item.title}}</view>
					<view>
						<block v-if="item.hasChange == true">1</block>
						<block v-else-if="item.hasChange == false">0</block>
					</view>
				</view>
				<view>〉</view>
			</view>
		</view>
    </view>
</template>

script

export default {
	props:['commentList'],
    data(){
        return {
            title:"组件"
        }
    },
	onLoad(){
            
    },
    methods:{
        click(e){
			console.log("组件click");
			// console.log(e);
			var index = e.currentTarget.dataset.index;
			var id = e.currentTarget.dataset.id;
			var str = {index:index,id:id};
			this.$emit('son-fun',str);
		}
    }
}

要点：this.$emit();是调用页面的方法

style

.container{
	padding: 20upx 34upx;
}
.title{
	font-size: 34upx;
	color: #42b983;
	font-weight: 600;
	text-align: center;
}
.item{
	font-size: 24upx;
	color: #8799a3;
	padding: 20upx 0;
	border-bottom: 1px solid #eee;
	display: flex;
	justify-content: space-between;
	-webkit-box-align: center;
}
.flex-l{
	display: flex;
	justify-content: flex-start;
}
.flex-l view{
	margin-right: 20upx;
}