uniapp组件传值方式
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>
更多推荐
已为社区贡献3条内容
所有评论(0)