首页 > 微信 > 详细

小程序篇---父组件与子组件之间的传值

时间:2021-04-15 23:26:56      阅读:25      评论:0      收藏:0      [点我收藏+]

1、父组件传递给子组件值,首先在components 中新建一个testComponents子组件,代码如下:

testComponents.wxml

<view>
   <text>{{value}}</text>
</view>

testComponents.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    value:{
      type:String, //指定传过来的值的类型
      value:0 //默认值,假如没有值传过来,value就会显示默认值
    }
  },

})

2、接下来我们新建一个index父组件,对应代码如下:

index.json

{
  "usingComponents": {
    "testComponent":"../../components/testComponent/testComponent"   //子组件的路劲
  }
}

index.wxml

<view >
  <testComponent value="张三"></testComponent>
</view>

3、运行index父组件得到的效果图如下(假如value值没传,那么内容就会显示为默认值:0):

技术分享图片技术分享图片

4、子组件传递给父组件值,还是用上面的子组件,代码如下:

testComponent.wxml

<view>
  <button bindtap="testClick">点击传递给父组件值</button>
</view>

testComponent.js

Component({
 
  /**
   * 组件的方法列表
   */
  methods: {
    testClick(){
      //triggerEvent可以理解为vue中$emit
      this.triggerEvent("myevent","张三")
    }
  }
})

5、还是用上面的父组件,代码如下:

index.json

{
  "usingComponents": {
    "testComponent":"../../components/testComponent/testComponent"
  }
}

index.js

Page({
  data:{
    value:null
  },
  thismyevent(e){
    // e.detail = 子组件传递过来的值
    this.setData({
      value:e.detail
    })
  }
})

index.wxml

<view >
  <testComponent bindmyevent="thismyevent"></testComponent>
  <text style="display: flex;justify-content:center;">{{value}}</text>
</view>

6、点击按钮得到子组件传递过来的张三,运行代码得到的效果图如下:

技术分享图片技术分享图片

 

小程序篇---父组件与子组件之间的传值

原文:https://www.cnblogs.com/laid/p/14664641.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!