微信小程序学习第10天——自定义组件(父子组件通信与behavior)
创始人
2024-05-24 07:39:13
0

一、父子组件通信

父子组件通信的3种方式:① 属性绑定 ② 事件绑定 ③ 获取组件实例

1、属性绑定

实现父向子传值,并且只能传递普通类型的数据

子组件在 properties 节点中声明对应的属性并使用

// 父组件的data节点
data:{num:33
}// 父组件的WXML结构
{num}}">// 子组件(test)的JS文件
Component({properties: {testNum:Number,},
})// 子组件的WXML文件
父组件传递过来的值为:{{testNum}}

2、事件绑定

实现子向父传值,可以传任意类型的数据
步骤:
①父组件定义一个函数 → ②父组件WXML通过自定义事件形式引用1中的函数 → ③在子组件中,调用this.triggerEvent('自定义事件名称',{/*参数对象*/}),将数据发送到父组件 → ④在父组件中通过e.detail获取到子组件传递的数据

// 父组件定义函数
addCount(){console.log(111)
}// 父组件WXML通过自定义事件引用函数

// 子组件调用this.triggerEvent()方法

子向父亲传递数据:{{count}}methods: {addCount(){this.setData({count:this.data.count +1})this.triggerEvent("addCount",{value:this.data.count})}
}// 父组件通过e.detail获取数据
addCount(e){this.setData({count:e.detail.value})
}

3、获取组件实例

在父组件里调用 this.selectComponent("id或class选择器") ,获取子组件的实例对象,从而直接访问子组件的任意数据和方法。

// 父组件WXML结构
{count}} bind:AddCount="addCount" class=".son">
// 父组件方法
getChild(){const child = this.selectComponent('.son');child.setData({count:child.properties.count +1})child.addCount()}

二、behavior

behaviors 是小程序中,用于实现组件间代码共享的特性,类似于 Vue.js 中的 “mixins”

1、工作模式

每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中

2、创建behavior

调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象

// behavior.js文件
module.exports = Behavior({properties:{},data:{},methods:{}
})

3、导入并引用behavior

使用 require() 方法导入需要的 behavior,挂载后即可访问 behavior 中的数据或方法

// 在自定义组件的js文件中导入并behavior模块
const myBehavior = require("../../behaviors/behavior");
// 引用behavior
Component({behaviors:["myBehavior"],
})

4、behavior中所有可用的节点

可用的节点类型是否必填说明
propertiesObject Map同组件的属性
dataObject同组件的属性
methodsObject同自定义组件的方法
behaviorsString Array引入其他的behavior
createdFunction生命周期函数
attachedFunction生命周期函数
readyFunction生命周期函数
movedFunction生命周期函数
detachedFunction生命周期函数

相关内容

热门资讯

喜欢穿一身黑的男生性格(喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识,其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思(思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思,以及思春和发春是什么意思对应的知识点,希望对各位有所帮助,...
网络用语zl是什么意思(zl是... 今天给各位分享网络用语zl是什么意思的知识,其中也会对zl是啥意思是什么网络用语进行解释,如果能碰巧...
为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?,以及为什么酷狗下载的歌曲不是...
华为下载未安装的文件去哪找(华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识,其中也会对华为下载未安装的文件去哪找到进行解...
家里可以做假山养金鱼吗(假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识,其中也会对假山能放鱼缸里吗进行解释,如果能碰巧解...
四分五裂是什么生肖什么动物(四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物,以及四分五裂打一生肖是什么对应的知识点,希...
怎么往应用助手里添加应用(应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识,其中也会对应用助手怎么添加微信进行解释,如果能...
客厅放八骏马摆件可以吗(家里摆... 今天给各位分享客厅放八骏马摆件可以吗的知识,其中也会对家里摆八骏马摆件好吗进行解释,如果能碰巧解决你...
美团联名卡审核成功待激活(美团... 今天百科达人给各位分享美团联名卡审核成功待激活的知识,其中也会对美团联名卡审核未通过进行解释,如果能...