小程序组件传值和父组件调用子组件事件

1.小程序组件传值

1.全局和局部组件父子之间传值

首先创建组件，commonality下放的组件的页面，在app.json中添加组件

//app.json
"usingComponents": {
    "test-element": "/commonality/testElement/testElement"
  }

在需要用到组件的地方直接调用就可以了

<!--  父组件的html  fatherTest.html-->
<test-element paramTest='{{dataTest}}'></test-element>

//父组件js  fatherTest.js
Page({
  data: {
    dataTest: "我是父组件的值，要给子组件使用"
  }
})

子组件定义

<!-- 子组件testElement.wxml -->
<view>
<!-- 这里面画自己的页面，使用父组件传来的值 -->
	<view>{{dataTest}}</view>
</view>

//testElement.js,接受父组件传过来的值
Component({
	properties:{
		dataTest:{
			type:String,//看你在父组件传过来的是什么类型写什么类型，我的是字符串类型
			value:'我是默认值'//这里可以给dataTest设置一个默认值
		}
	}
})

//testElement.json 需要在json中进行自定义组件声明
{
	"component": true,//声明自定义组件
	"usingComponents": {}  //局部组件只需要在需要的页面的json里面引入就可以了，传值方式和上面一样
}

2.组件子传父

子组件传父组件按钮方式传值

<view bindtap='testClick'></view>

子组件js定义

testClick:function(){
 this.triggerEvent('myevent', '这是子组件传给父组件的值')
}

父组件定义

<test-element bind:myevent="onGetCode"></test-element>

父组件接受子组件的值

onGetCode: function (e){
      console.log('后面是子组件传过来的值做打印',e.detail)
    },

2 父组件调用子组件事件

父组件HTML定义

//给子组件标签加一个id
<test-element id='childI'></test-element>

父组件js定义

this.selectComponent("#childI").子组件事件名称('可以给子组件的时间传参数也可以不传');