uniapp组件传值方式

1.$emit传值方式

//在组件或者父组件中使用，order_id为参数名， this.order_id为参数值
uni.$emit('order_id', this.order_id);
//在父组件中接收参数，参数名要和被传递的参数值相同，
uni.$on('order_id', data => {
			console.log(data)；//data为传递过来的数据
		});

2.poprs垮组件传值

//(1)在父组件中使用

<template>
	<view>
		<LuckyWheel @start="str" @end="end" :activeId="activeId"/>
	</view>
</template>

<script>
import LuckyWheel from '@/components/marketing-activities/marketing-activites.vue'; //你的组件地址
export default {
	components: { LuckyWheel }, //可自定义组件名字
	data() {
		return {
			activeId: '551072607760285696' //活动id
		};
	},
	
};
</script>

//(2)子组件中用props接收

export default {
	props: {
		activeId: {
			type: String,//定义传值类型
			default: function() {
				return {};
			}
		}
	},
	data(){
	   return{
	   
	         }
	  },
	created() {
		console.log('父组件data定义的变量包含函数', this.activeId);
		this.active_id=this.activeId
	      },
	}

3.传递组件中的方法状态

(1)在子组件中传递方法

methods:{
    endCallBack() {
		this.$emit('end');//传递方法可自定义方法名称
		}
}

(2)在父组件中使用 @start="str" @end="end"为接收过来的方法

<template>
	<view>
		<LuckyWheel @start="str" @end="end" :activeId="activeId"/>
	</view>
</template>

<script>
import LuckyWheel from '@/components/marketing-activities/marketing-activites.vue'; //你的组件地址
export default {
	components: { LuckyWheel }, //可自定义组件名字
	data() {
		return {
			activeId: '551072607760285696' //活动id
		};
	},
	mounted() {
		
	},
	onLoad() {},
	methods: {
		str() {
			alert('开始抽奖');
		},
		end() {
			alert('结束抽奖');
		}
	}
};
</script>

4.（1）传递组件中的方法和传值

methods:{
endCallBack:function(prize) {
			//prize为组件中想要传递到页面的值
			this.$emit('end',prize)   //把方法和值传递到页面    
        }
}

（2）在页面接受

<template>
	<view><LuckyWheel @end="end"  />
	</view>
</template>

<script>
import LuckyWheel from '@/components/marketing-activities/marketing-activites.vue'; //你的组件地址
export default {
	components: { LuckyWheel }, //可自定义组件名字
	data() {
		return {
			
		};
	},
	created() {
		
	},
	onLoad() {},
	methods: {
		end(prize) {
			 console.log(prize, '组件传过来的值');
		},
		
	}
};
</script>