微信小程序--》小程序—组件通信和behavior使用

简介: ⚓经过web前端开发的学习,相信大家对于前端开发有了一定深入的了解,今天我开设了微信小程序,主要想从移动端开发方向进一步发展,而对于我来说写移动端博文的第一站就是小程序开发,希望看到我文章的朋友能对你有所帮助。

🏍️组件通信

🍇父子组件的通信方式

属性绑定:用于父组件向子组件的指定属性设置数据,仅能设置JSON兼容的数据。

属性绑定用于实现父向子传值,而且只能传递普通类型的数据,无法将方法传递给子组件。

图片.png

图片.png

图片.png

事件绑定:用于子组件向父组件传递数据,可以传递任意数据。

事件绑定用于实现子向父传值,可以传递任何类型的数据,其使用步骤如下:

父组件的.js中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件

//和data平齐syscCount(){
},

父组件的.wxml中,通过自定义事件的形式,将步骤一定义的函数引用传递给子组件

<mydemo4count="{{count}}"bind:sysc="syscCount"></mydemo4>

子组件的.js中,通过调用this.triggerEvent('自定义事件名称',{/*参数对象*/}),将数据发送到父组件

methods: {
addCount(){
this.setData({
count:this.properties.count+1    })
// 触发自定义事件,将数值同步给父组件this.triggerEvent('sysc',{value:this.properties.count})
  }
}

父组件的.js中,通过e.detail获取到子组件传递过来的数据

//和data平齐syscCount(e){
console.log('sysCount!!!');
// console.log(e.detail.value);this.setData({
count:e.detail.value  })
},

图片.png

获取组件实例:父组件可以通过 this.selectComponent() 获取子组件实例对象,这样可以直接访问子组件的任意数据和方法。

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

//.wxml
<mydemo4count="{{count}}"bind:sysc="syscCount"class="child"id="childId"></mydemo4><view>-------</view><view>父组件中,count的值是:{{count}}</view><buttonbindtap="getChild">获取子组件的实例对象</button>//.js
getChild(){ //按钮的 tap 处理函数
  // 切记下面参数不能传递标签选择器,只能的id或者class,否则会返回 null
  const child = this.selectComponent('.child')
  // console.log(child);
  // child.setData({
  //   count:child.properties.count + 1
  // })
  child.addCount()
}

🏍️behaviors

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

🍇behaviors工作方式

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

🍈创建 behavior

调用 Behavior (Object object) 方法,即可创建一个共享的 behavior 实例对象,供所有组件使用:

图片.png

//调用 Behavior() 方法,创建实例对象并使用 module.exports 把 behavior 实例对象共享出去module.exports=Behavior({
// 属性节点properties:{},
// 私有数据节点data:{
username:'zs'  },
// 事件处理函数和自定义方法methods:{},
// 其他节点。。。})

🍉导入并使用 behavior

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

// 使用 require() 导入需要的自定义 behavior 模块constmyBehavior=require('../../behaviors/my-behaviors')
Component({
// 将导入的 behavior 实例对象挂载到 behavior 数组节点中,即可生效behaviors:[myBehavior],
})

图片.png

🍊behavior中所有可用的节点

可用的节点 类型        可选项是否必须 描述

properties Object Map 否        同组件的属性

data             Object             否        同组件的数据

methods Object             否        同自定义组件的方法

behaviors String Array 否        引入其它的 behavior

created             Function             否        生命周期函数

attached Function 否        生命周期函数

ready             Function             否        生命周期函数

moved             Function             否        生命周期函数

detached Function 否 生命周期函数

🍋同名字段的覆盖和组合规则

组件和它引用的 behavior 中可以包含同名字段,对这些处理的字段有如下三种同名处理规则:

同名的数据字段(data):

若同名的数据字段都是对象类型,会进行对象合并;

其余情况会进行数据覆盖,覆盖规则为: 引用者 behavior > 被引用的 behavior靠后的 behavior > 靠前的 behavior。(优先级高的覆盖优先级低的,最大的为优先级最高);

同名的属性(properties)或方法(methods)

若组件本身有这个属性或方法,则组件的属性或方法会覆盖 behavior 中的同名属性或方法;

若组件本身无这个属性或方法,则在组件的 behaviors 字段中定义靠后的 behavior 的属性或方法会覆盖靠前的同名属性或方法;

在 2 的基础上,若存在嵌套引用 behavior 的情况,则规则为:引用者 behavior 覆盖 被引用的 behavior 中的同名属性或方法。

同名的生命周期函数

对于不同的生命周期函数之间,遵循组件生命周期函数的执行顺序;

对于同种生命周期函数和同字段 observers ,遵循如下规则:

behavior 优先于组件执行;

被引用的 behavior 优先于 引用者 behavior 执行;

靠前的 behavior 优先于 靠后的 behavior 执行;

如果同一个 behavior 被一个组件多次引用,它定义的生命周期函数和 observers 不会重复执行。

相关文章
|
4天前
|
人工智能 小程序 程序员
【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
89 7
|
11天前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
115 12
|
4月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
90 1
|
3月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
77 0
在线课堂+工具组件小程序uniapp移动端源码
|
4月前
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
129 1
微信小程序:轻松实现时间轴组件
|
4月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
851 1
|
4月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
134 0
微信小程序:自定义关注公众号组件样式
|
4月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
146 1
|
4月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
335 1
|
4月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1707 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机

热门文章

最新文章