1.父子组件之间通信的三种方式
1.1属性绑定:父—>子
在子组件中的properties中先提前定义好父组件传递过来的数据,
properties: {
count:{
type:Number,
value:0
}
}
注意:properties中的数据与data中的数据是一致的,直接可以被修改
在父组件中通过子组件标签以属性的方式传递数据给子组件
<son-comp count="{{count}}"></son-comp>
属性绑定(只能传递一些基础的数据,不能传递复杂数据如:函数)
1.2事件绑定:子—>父
步骤1:
在父组件js文件中定义一个函数,这个函数通过自定义事件的形式传递给子组件
步骤2:
在父组件的wxml中,通过自定义事件的形式,将步骤1中定义的函数引用,传递给子组件
自定义事件:通过bind来实现
<标签 bind:自定义事件名称="步骤1中定义好的函数"></标签>
或者
<标签 bind自定义事件名称="步骤1中定义好的函数"></标签>
步骤3:
在子组件中通过this.triggerEvent("父组件传递过来的自定义事件名称",{携带参数}) =》来调用父组件传递过来的自定义事件
步骤4:
在父组件自定义事件函数中通过event事件对象.detail 来获取参数
1.3获取组件实例:
获取组件实例:在父组件直接使用子组件中的数据和方法
// 在父组件内部调用selectComponent(“子组件的class选择器或者id选择器”)
getSonData(){
// 在父组件中获取子组件实例对象
const sonCompObj=this.selectComponent(".son")
console.log(sonCompObj);
// 使用子组件实例修改子组件内部属性
/* sonCompObj.setData({
"number":sonCompObj.data.number+10
}) */
// 使用子组件实例调用子组件内部方法
sonCompObj.addNum()
},
给子组件提供一个类选择器或者id选择器
<son-comp class="son" bind:getSonComNumData="getSonComNumData" count="{{count}}"></son-comp>
版权声明:本文为weixin_46435234原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。