原生小程序开发的父子组件传值,兄弟组件传值

1.父子传值,父组件通过属性的方式去给子组件传递值,子组件在properties属性去接收父组件传递过来的值:

父组件部分:

<view class="pcolor">
	<customer id="child" bind:changSex="changSex" sex="{{sex}}" checked="{{checked}}"></customer>
	<view>父组件的值:{{sex}}</view>
</view>

子组件部分:

properties: {
    sex:{
      type:String,
      value:'女'
    },
    checked:{
      type:Boolean,
      value:false
    }
  },

通过 this.triggerEvent('changSex','女')去修改父组件的值

2.组件之间的传值:

需要使用pubsub-js这个插件,下载npm install pubsub-js

在组件1 引入import PubSup from 'pubsub-js', 通过PubSup.publish('info',{name:'zhansgan',age:20});去传递值

在组建2 引入import PubSup from 'pubsub-js',在生命周期去接收

 lifetimes:{
    attached() {
      PubSup.subscribe('info',(name,value)=>{
        console.log(name,value)
      })
    }
  },

3.页面间的传值:

跳转页面:
jump:function() {
    wx.navigateTo({
      url: '/pages/list/list',
      events:{
        send1:(e)=>{
          console.log(e)
        }
      },
      success:(res)=>{
        console.log(res)
        res.eventChannel.emit('send',{name:'zhangsan'})
      }
    })
  },
 接收页面:
onLoad() {
    const openerEventChannel = this.getOpenerEventChannel();
    console.log('111')
    openerEventChannel.on('send',(res)=>{
      console.log(res)
    })
    openerEventChannel.emit('send1',{age:10})
  }

### 微信小程序父组件与子组件之间的数据通信 #### 父组件向子组件 在微信小程序中,父组件可以通过 `properties` 属性将数据递给子组件。具体实现如下: 1. **父组件设置自定义属性** 在父组件的 WXML 文件中,通过绑定自定义属性的方式将数据递到子组件[^3]。 ```wxml <child-component myProp="{{parentData}}"></child-component> ``` 2. **子组件声明接收属性** 子组件需要在 JavaScript 中通过 `properties` 对象来声明可以接收的属性及其类型和默认[^3]。 ```javascript Component({ properties: { myProp: { type: String, value: '' } }, lifetimes: { attached() { console.log('接收到的数据:', this.data.myProp); } } }); ``` 以上方法实现了父组件向子组件单向递数据的功能。 --- #### 子组件向父组件 子组件可以通过触发事件的方式将数据递回父组件。以下是具体的实现方式: 1. **子组件触发事件并携带参数** 子组件可以在某个操作(如按钮点击)发生时调用 `triggerEvent` 方法,通知父组件发生了特定事件,并附带需要递的数据[^1]。 ```javascript Component({ methods: { sendDataToParent() { const data = '这是子组件发送给父组件的数据'; this.triggerEvent('customEvent', { message: data }); // 自定义事件名和数据 } } }); ``` 2. **父组件监听子组件事件** 父组件需要在 WXML 文件中绑定子组件触发的事件名称,并在对应的回调函数中处理接收到的数据[^2]。 ```wxml <child-component bindcustomEvent="handleChildEvent"></child-component> ``` ```javascript Page({ handleChildEvent(e) { console.log('来自子组件的数据:', e.detail.message); // 获取子组件递的数据 } }); ``` 这种方法允许子组件主动向父组件递信息,从而完成双向通信。 --- ### 完整示例代码 #### 父组件 (Page) ```wxml <view class="container"> <!-- 将 parentMessage 作为 prop 递 --> <child-component myProp="{{parentMessage}}" bindcustomEvent="onReceiveFromChild"></child-component> <text>父组件显示的消息:{{displayedMessage}}</text> </view> ``` ```javascript Page({ data: { parentMessage: "我是父组件", displayedMessage: "" }, onReceiveFromChild(event) { this.setData({ displayedMessage: event.detail.message // 更新父组件消息 }); } }); ``` #### 子组件 (Component) ```json { "component": true } ``` ```wxml <view class="child-container"> <text>{{myProp}}</text> <button bindtap="sendData">点击向父组件发消息</button> </view> ``` ```javascript Component({ properties: { myProp: { type: String, value: "" } }, methods: { sendData() { this.triggerEvent("customEvent", { message: "子组件已发送消息" }); } } }); ``` --- ### 总结 - 父组件向子组件主要依赖于 `properties` 的配置以及父组件中的动态绑定。 - 子组件向父组件则依靠 `triggerEvent` 和父组件对事件的监听机制。 两者结合即可实现完整的父子组件间数据交互功能。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

m0_45925246

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值