小程序自定义组件父子传值/子父传值

自定义组件父子传值(简易版)

由于我这边是组件与页面之间的传递
自定义组件这个参考

效果图

父组件

由于这边是拿到的组件页面，假设这边是父
里面的值为aaa="aa333"
wxml

<!-- 父组件(页面)向子组件传递数据,通过标签属性的方式传递
2 在子组件接收  把这个数据当成是data中的数据直接用
-->
<Tabs  aaa="aa333"></Tabs>

json

{
    "component": true,
    "usingComponents": {
        "Tabs":"../../components/tabs/tabs"//这边引入组件的页面  PS 具体在自定义组件有介绍
    }
}

子组件

这边的子组件是自定义的组件，
PS 接收页面定义的值在这里面显示出来
wxml

<view class="tabs">
    <view class="tabs_title">
   <view wx:for="{{list}}" wx:key="id" bindtap="btnshow" data-id="{{item.id}}"
   class="{{currindex==item.id ? 'active'  : ''}}"
   >{{item.name}}</view>
    </view>

    <view class="tabs_contents">
    </view>
</view>



<view>{{aaa}}</view>//这边的aaa是接收 父组件传来的值  上面那个是自定义组件的标签 

wxss

.tabs_title{
    display: flex;
    justify-content: space-around;
}
.active{
    color: blue;
    border-bottom: 1px solid gray;
}

js

Component({
    properties: {//这个是用来接收的组件数据
    //这个是要接收数据的名称
    aaa:{
        // type要接收数据的名称
        // value表示数据的默认值
        type:String,
         value:"",
    }    
    },
    data: {
        currindex: 0,
        list: [{
                id: 0,
                name: "首页",
            },
            {
                id: 1,
                name: "发现",
            },
            {
                id: 2,
                name: "订单",
            },
            {
                id: 3,
                name: "我的",
            }
        ],
        list1:[

        ]
    },
    // 组件存放回调函数时，必须放在methods里面
    methods: {
        btnshow(e) {
            this.setData({
                currindex: e.target.dataset.id
            })
        }
    }
})

自定义组件父子传值(升级版)

父组件

wxml

<!-- 父组件(页面)向子组件传递数据,通过标签属性的方式传递

    2 在子组件接收  把这个数据当成是data中的数据直接用
-->
<Tabs list="{{list}}"></Tabs>

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [{
      id: 0,
      name: "首页",
  },
  {
      id: 1,
      name: "发现",
  },
  {
      id: 2,
      name: "订单",
  },
  {
      id: 3,
      name: "我的",
  }
],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

子组件

重点在js里面进行接收
wxml

<view class="tabs">
    <view class="tabs_title">
   <view wx:for="{{list}}" wx:key="id" bindtap="btnshow" data-id="{{item.id}}"
   class="{{currindex==item.id ? 'active'  : ''}}"
   >{{item.name}}</view>
    </view>

    <view class="tabs_contents">
    </view>
</view>

wxss

.tabs_title{
    display: flex;
    justify-content: space-around;
}
.active{
    color: blue;
    border-bottom: 1px solid gray;
}

js

Component({
    properties: {
        list:{
            type:Array,
            value:[]
        }
    },
    data: {
        currindex: 0,
        list1:[]
    },
    // 组件存放回调函数时，必须放在methods里面
    methods: {
        btnshow(e) {
            this.setData({
                currindex: e.target.dataset.id
            })
        }
    }
})

自定义组件子父传值

主要是js的点击事件的事件进行传递

子

wxml

<view class="tabs">
    <view class="tabs_title">
   <view wx:for="{{list}}" wx:key="id" bindtap="btnshow" data-id="{{item.id}}"
   class="{{currindex==item.id ? 'active'  : ''}}"
   >{{item.name}}</view>
    </view>

    <view class="tabs_contents">
    </view>
</view>

wxss

.tabs_title{
    display: flex;
    justify-content: space-around;
}
.active{
    color: blue;
    border-bottom: 1px solid gray;
}

js

Component({
    properties: {
        list:{
            type:Array,
            value:[]
        }
    },
    data: {
        currindex: 0,
    },
    // 组件存放回调函数时，必须放在methods里面
    // PS 在点击事件触发时，触发父组件的自定义事件 ，同时传递给父组件
    // this.triggerEvent('父组件自定义事件',要传递的参数)
    methods: {
        btnshow(e) {
            console.log(e)
            const btnid=e.currentTarget.dataset.id
            this.triggerEvent('itemchange',{ btnid});
            this.setData({
                currindex:btnid
            })
        }
    }
})

父

子向父传递数据通过事件的方式传递
在子组件的标签加上一个 bind 自定义事件
wxml

<Tabs list="{{list}}" binditemchange="handitem"></Tabs>

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    currindex:0,
    list: [{
      id: 0,
      name: "首页",
  },
  {
      id: 1,
      name: "发现",
  },
  {
      id: 2,
      name: "订单",
  },
  {
      id: 3,
      name: "我的",
  }
],
  },

  handitem(e){
    console.log(e)//这里面可以实时在子页面里面进行打印在显示
    const btnid=e.detail.btnid
  }
})