小程序组件之间的通信

小程序组件之间的通信

在边学边做小程序项目的时候，总结出一些小程序到遇到的知识点。

父组件传值给子组件

页面

 	<navBarMenu bindmyevent="onMyEvent" bindHideSanFun="menuClick"  list="{{menu}}" titleHeight="{{titleHeight}}" ></navBarMenu>

子组件

  Component({
      properties: { 
  	list:{
  	  type:Array,
  	  observer: function (newVal, oldVal, changedPath) {
      // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串
      // 通常 newVal 就是新设置的数据， oldVal 是旧数据
    }
  	},
  	titleHeight:{
  	  type:Number,
  	  default:0
  	}
    },
  }); 

父组件调用子组件方法

页面
wxml

<navBarMenu id="navBarMenu"></navBarMenu>

JS

 executionMethod: function (params) {
  		var navBarMenu = this.selectComponent('#navBarMenu')
  		// 父组件里执行子组件的方法
  		navBarMenu.isShow(); 
  	  }, 

子组件
JS

   isShow(){
	  ......
	  }

子组件触发父组件方法及传值

页面
wxml

<navBarMenu bindmyevent="onMyEvent" ></navBarMenu>

JS

onMyEvent（e）{
 	.....
 	}

子组件
JS

onMyEvent: function (params) {
  	  this.triggerEvent('myevent', "")
  	  },