首页 > 微信 > 详细

小程序自定义组件(3)子向父传参

时间:2020-05-13 17:56:58      阅读:50      评论:0      收藏:0      [点我收藏+]

技术分享图片

 

 

// components/tabs/tab.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabs:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //切换选项卡事件
    cuttab(e){
      const {index}=e.currentTarget.dataset;

      //触发父组件中的自定义事件   同时传递数据给父组件
      //this.triggerEvent("父组件自定义事件的名称",要传递的参数);
      this.triggerEvent("tabcuts",{index});

      //let{tabs}=this.data;

      // tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
      // this.setData({
      //   tabs
      // })
    }



  }
})

技术分享图片

 

 技术分享图片

 

 

// pages/test4/test4.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:"首页",
        isActive:true
      },
      {
        id:1,
        name:"产品分类",
        isActive:false
      },
      {
        id:2,
        name:"购物车",
        isActive:false
      },
      {
        id:3,
        name:"关于",
        isActive:false
      }
    ]
  },
  tabcutsFun(e){
    //console.log(e);
    const {index}=e.detail;
    
    let{tabs}=this.data;
    tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
    this.setData({
      tabs
    })

  }

})

 

 

效果展示:

技术分享图片

 

小程序自定义组件(3)子向父传参

原文:https://www.cnblogs.com/JoeYD/p/12883362.html

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