uniapp 组件间传值

方法一（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();
    });

对您有用的话记得点个赞哦 ~