1.属性绑定:父组件传递参数到子组件
首先交代一下基本的项目信息:主页面为index.wxml,创建test子组件,文件目录:component/test/test,index.json中引用test组件.
{ "component": true, "usingComponents": { "test":"/component/test/test" } }
演示案例:
父组件中定义num并初始化数据为1,将num传递到子组件test中并展示.
index.js中定义num并初始化数据为1
Page({ data: { num:1 } })
index.html中创建view组件
<view>父组件属性:{{num}}</view>
test.html中接收父组件中数据:
<view>子组件获取到父组件的属性:{{num}}</view>
test.js中定义num属性:
Componet({ properties:{ num:Number } })
页面展示效果如下:
2.事件绑定:子组件传递参数到父组件
操作步骤:
1.父组件js中定义函数;
2.父组件中通过传递自定义事件形式传递给子组件;
3.子组件js中调用父组件自定义事件;
this.triggerEvent('父组件函数', {value: 子组件参数});
3.父组件自定义事件处理子组件传递参数,通过event.detail.value获取
示例说明:
index.wxml中添加test组件,test组件创建初始值subCount和加一按钮,点击按钮实现subCount加一.父组件中创建初始值parCount,实现test子组件中点击按钮之后不仅能实现subCout加一,也能将subCount赋值给parCount.即点击按钮实现subCount与parCount同步变化.
子组件test中初始化subCount以及创建按钮实现点击加一操作:
test.wxml:
<view>子组件data属性subCount值:{{subCount}}</view> <button type="primary" bindtap="subCountAdd">子组件中点击数据值加一</button>
test.js中:
Component({ data:{ subCount:1 }, methods:{ subCountAdd:function(){ this.setData({ subCount: this.data.subCount+1 }) }} })
父组件index.js中初始化parCount并创建传递参数函数,通过参数event.detail.value来获取传递参数:
Page({ data: { parCount:2 }, // 自定义父组件函数 transferFucntion(event){ console.log("父组件中传参事件触发!"), console.log(event.detail) } } )
父组件index.wxml中在子组件test中传递自定义函数:
<test bind:transferFucntion="transferFucntion"></test> <view>父组件data属性parCount值:{{parCount}}</view>
子组件test.js中的加一方法中添加父组件的自定义事件,传递参数为
Component({ data:{ subCount:1 }, methods:{ subCountAdd:function(){ this.setData({ subCount: this.data.subCount+1 }), // 注册父组件方法,this.triggerEvent('父组件函数名',参数(非必填)) this.triggerEvent('transferFucntion', {value: this.data.subCount}); }} })
父组件index.js中通过参数event.detail.value来获取传递参数并赋值给parCount:
Page({ data: { parCount:2 }, // 自定义父组件函数 transferFucntion(event){ console.log("父组件中传参事件触发!"), console.log(event.detail), this.setData({ parCount:event.detail.value }) } } )
最终实现效果,点击按钮,子组件中subCount与parCount同步变化.
4.获取组件对象实例:父组件获取子组件实例对象进行参数传递
父组件中使用this.selectComponent('子组件id选择器或是class选择器)进行获取子组件实例,进而传递参数到子组件.
演示示例:
父组件index.wxml中创建点击事件获取子组件test中subCount值以及调用子组件的subCountAdd方法(subCount与subCountAdd均在上个案例中定义过)
index.wxml中创建点击事件selectSubCompnet并给子组件test设置id属性和class属性:
<test id="subCompnetId" class="subCompnetClass"></test> <button type="primary" bindtap="selectSubCompnet">点击获取子组件</button>
index.js中点击事件获取子组件实例并获取子组件属性和方法并调用:
Page({ // 父组件选择子组件 selectSubCompnet(){ const subCompnet=this.selectComponent('#subCompnetId'); console.log("subCount值:"+subCompnet.data.subCount); subCompnet.subCountAdd(); console.log("调用子组件subCountAdd方法之后subCount值:"+subCompnet.data.subCount); } })
点击按钮并观察控制台输出内容:
观察可以发现子组件subCount与subCountAdd方法均被调用;使用this.setDate即可更改子组件属性.
