微信小程序组件间的传递

最新推荐文章于 2023-09-08 17:10:46 发布

Tt哈西

最新推荐文章于 2023-09-08 17:10:46 发布

阅读量356

点赞数

分类专栏：微信小程序文章标签：微信小程序父子间的传递组件间的传递

本文链接：https://blog.csdn.net/weixin_43399733/article/details/102641355

版权

微信小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

微信小程序父子组件间的传递

在小程序的components下新建一个名 children的子组件
在这里插入图片描述

在pages下新建一个名为father的父组件

1.父组件给子组件传递信息

先在父组件father的json中引用

{
  "usingComponents": {
    "Children":"/components/children/children"
  }
}

父组件father的 wxml

<Children fatherToChildren='我是爸爸我给了我的儿子十元钱' />

子组件children的js

// components/children/children.js
Component({
 
  properties: {
    fatherToChildren:String //在这里接收父组件传递过来的类型
  },


  data: {

  },

  methods: {
   
  }
})

子组件Children wxml

<view>
  <text style='font-size:30rpx;'>我是子组件:</text>
  <text style='color:red;font-size:30rpx;'>{{fatherToChildren}}</text>
</view>

2.子组件给父组件传递信息这个代码是完整的既包含子传父也包含父传子

父组件father的 wxml

<view>
 <text>我是父组件:</text><text style='font-size:30rpx;color:blue'>{{cToF}}</text>
  <Children fatherToChildren='我是爸爸我给了我的儿子十元钱' bind:getMoney='ongetMoney'/>
</view>

父组件father的 js

// pages/father/father.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },
  ongetMoney(e){
    this.setData({
      cToF: e.detail.say
    })
  },
 
})

子组件children的js

// components/children/children.js
Component({
 
  properties: {
    fatherToChildren:String
  },

  
  data: {

  },


  methods: {
    change(){
      this.triggerEvent('getMoney',{say:'我是儿子:再给我一些吧'})
    }
  }
})

子组件Children wxml

<view>
  <text style='font-size:30rpx;'>我是子组件:</text>
  <text style='color:red;font-size:30rpx;'>{{fatherToChildren}}</text>
  <button catchtap='change'>我还要</button>
</view>