1、父组件传递给子组件值,首先在components 中新建一个testComponents子组件,代码如下:
testComponents.wxml
<view> <text>{{value}}</text> </view>
testComponents.js
Component({ /** * 组件的属性列表 */ properties: { value:{ type:String, //指定传过来的值的类型 value:0 //默认值,假如没有值传过来,value就会显示默认值 } }, })
2、接下来我们新建一个index父组件,对应代码如下:
index.json
{ "usingComponents": { "testComponent":"../../components/testComponent/testComponent" //子组件的路劲 } }
index.wxml
<view > <testComponent value="张三"></testComponent> </view>
3、运行index父组件得到的效果图如下(假如value值没传,那么内容就会显示为默认值:0):
4、子组件传递给父组件值,还是用上面的子组件,代码如下:
testComponent.wxml
<view> <button bindtap="testClick">点击传递给父组件值</button> </view>
testComponent.js
Component({ /** * 组件的方法列表 */ methods: { testClick(){ //triggerEvent可以理解为vue中$emit this.triggerEvent("myevent","张三") } } })
5、还是用上面的父组件,代码如下:
index.json
{ "usingComponents": { "testComponent":"../../components/testComponent/testComponent" } }
index.js
Page({ data:{ value:null }, thismyevent(e){ // e.detail = 子组件传递过来的值 this.setData({ value:e.detail }) } })
index.wxml
<view > <testComponent bindmyevent="thismyevent"></testComponent> <text style="display: flex;justify-content:center;">{{value}}</text> </view>
6、点击按钮得到子组件传递过来的张三,运行代码得到的效果图如下: