1.属性绑定:父组件传递参数到子组件
2.事件绑定:子组件传递参数到父组件
3.获取组件对象实例:父组件获取子组件实例对象进行参数传递
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.2.事件绑定:子组件传递参数到父组件
操作步骤:
1.父组件js中定义函数;
2.父组件中通过传递自定义事件形式传递给子组件;
3.子组件js中调用父组件自定义事件;
this.triggerEvent('父组件函数',
{value: 子组件参数});
4.父组件自定义事件处理子组件传递参数,通过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同步变化.
3.获取组件对象实例:父组件获取子组件实例对象进行参数传递
父组件中使用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即可更改子组件属性.
