WeChat小程序组件与页面传值总结

一.页面向组件内部传值

第一步 在页面的json文件中 配置要引用的组件的路径

{
  "usingComponents": {
    "my-sel"  : "/components/my-sel/my-sel"
  }
}

第二步 页面向组件 传值

在页面中创建组件
修改组件内的数据

页面的js中实现点击方法
Page({
   handleIncrementCpn (){
    //1.获取组件对象
    const my_sel = this.selectComponent('.sel-class')
    //通过方法对数据进行修改
    my_sel.incrementCounter(10)
  }
})

第三步 组件内接收页面传过来的值

Component({
  /**
   * 组件的初始数据
   */
  data: {
     counter : 0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    incrementCounter(num){
      this.setData(
        {
         counter : this.data.counter + num
        }
      )
    }
  }
})

二.组件向页面内部传值

第一步页面内准备接收组件传过来的值

当前计数:{{counter}}


Page({
    data: {
    counter : 0
  }, 
})

第二步 组件内的值向外传递

+1

Component({
  /**
   * 组件的方法列表
   */
  methods: {
    handleIncrement(){
     //类似于iOS的通知 将事件发出去
      this.triggerEvent('increment',{name:'why',age : 18});
    }
  }
})

第三步 页面内接收到组件内的事件去执行修改自身值的操作

Page({

  data: {
    counter : 0
  },
  handleIncrement666 (){
//可接收组件内传过来的值
  console.log("++++++++",event);
    this.setData({
      counter:this.data.counter + 1
    })
  }
})