方法一(uniapp-vue2的写法)
一、父给子发信息
父组件发送信息给子组件
index.vue
import Bank from './components/bank.vue'
export default {
components: { Bank },
data() {
return {
bank: '你好',
}
}
}
// template部分
<Bank :bank="bank"></Bank>
子组件接收父组件信息
/components/bank.vue
// js部分
export default {
props: {
bank: {
type: String,
//还可写成 default: () => {}, 默认值=> default: true
}
}
<template>
<view>{{ bank}}</view>
</template>
二、子给父发信息
注意:有时候子传父的数据比较多重,然后在小程序中拿到的数据会不同于app和H5。小程序接收方式:item.target.__ args __[0] 注:由于上面的空格是没有空格的,csdn导致这样写才能显示出来
子组件发信息给父组件
/components/bank.vue
this.$emit('closeTestPage', true)
父组件接收子组件信息
index.vue
import Bank from './components/bank.vue'
export default {
components: { Bank },
}
// template部分
<Bank @closeTestPage="closeTestPage"></Bank>
方法二(uniapp的写法)
简述:uniapp中并没有固定父传子和子传父分别要怎么写,其中emit为触发事件,on为接收事件 。
注意:由于先创建和触发了emit,然后on还没创建成功,也就接收不成功了,所以要在emit加个定时器
//触发:
setTimeout(() => {
uni.$emit('bank', this.bank);
}, 100);
//另一个页面接收
uni.$on('bank', (bank) => {
this.bank = bank;
this.init();
});
对您有用的话记得点个赞哦 ~