【微信小程序】详解behaviors,如何使用behaviors

news2024/10/6 18:33:58

在这里插入图片描述

一,behaviors

1.1什么是 behaviors?

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

1.2behaviors 的工作方式

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

1.3创建 behavior

调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象,供所有的组件使用:在根目录下新建一个behaviors文件夹在文件夹下创建一个my-behavior.js

1.4导入并使用 behavior

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

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

列入我们想要在test5中使用my-behavior

在test5中:

// components/test5/test5.js
//1.使用require() 导入需要的自定义behavior模块
const myBehavior = require('../../behaviors/my-behavior')

在test5.wxml 使用behavios中定义的数据

<!--components/test5/test5.wxml-->
<view>子组件中,count值是:{{count}}</view>
<button bindtap="addCount">+1</button>
<view>在behavior中定义的用户名是:{{username}}</view>
Component({
//2. 将导入的behavior 实例对象,挂载到behaviors数组节点中,即可生效
behaviors:[myBehavior],

})

1.5 behavior 中所有可用的节点

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

同名字段的覆盖和组合规则
组件和它引用的 behavior 中 可以包含同名的字段 ,此时可以参考如下 3 种同名时的处理规则:

  1. 同名的数据字段 (data)
  2. 同名的属性 (properties) 或方法 (methods)
  3. 同名的生命周期函数

关于详细的覆盖和组合规则,大家可以参考微信小程序官方文档给出的说明:小程序官方文档

总结

  1. 能够创建并引用组件 全局引用、局部引用、usingComponents
  2. 能够知道如何修改组件的样式隔离选项 options -> styleIsolation( isolated, apply-shared, shared)
  3. 能够知道如何定义和使用数据监听器 observers
  4. 能够知道如何定义和使用纯数据字段 options -> pureDataPattern
  5. 能够知道实现组件父子通信有哪 3 种方式 属性绑定、事件绑定、this.selectComponent(’ id或class选择器’)
  6. 能够知道如何定义和使用behaviors 调用 Behavior() 构造器方法

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/451815.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【PE】inline hook的实现

【PE】inline hook的实现 hook思路 最基本的5字节的hook思路如下&#xff0c;有了这个思路&#xff0c;可以用更多的方式进行hook 通过修改目标函数开头的5个字节为jmp …&#xff0c;劫持程序执行流跳转过去之后&#xff0c;再把API开头5字节改回来&#xff08;UnHook&…

Servlet 入门到精通(六)

上一篇博客的传送门&#xff1a;Servlet 入门到精通&#xff08;五&#xff09; Servlet Filter 又称 Servlet 过滤器&#xff0c;它是在 Servlet 2.3 规范中定义的&#xff0c;是 Servlet 中的一个组件&#xff0c;是设计模式中责任链模式的一种经典实现。能够对 Servlet 容器…

SpringBoot启动自动执行sql脚本

在开发当中我们每次发布服务都需要手动执行脚本&#xff0c;然后重启服务&#xff0c;而SpringBoot有服务启动自动执行sql脚本的功能的&#xff0c;可以为我们省去手动执行脚本的这一步&#xff0c;只需要部署新的服务即可。 这个功能是SpringBoot自带的不需要引入额外的依赖&a…

Spring Boot 提取内存密码

访问 /actuator/heapdump 下载内存&#xff0c;提取密码 select * from java.util.LinkedHashMap$Entry x WHERE (toString(x.key).contains("password"))

学习系统编程No.21【进程间通信之共享内存】

引言&#xff1a; 北京时间&#xff1a;2023/4/16/21:53&#xff0c;刚刚把新文章发出去&#xff0c;开完班会回来&#xff0c;本来上篇博客在昨天就能发的&#xff0c;昨天下午打了一下午的羽毛球之后&#xff0c;饭都没吃&#xff0c;躺在床上&#xff0c;准备睡觉&#xff…

Spring五大类注解 || Bean的更简单存储

目录 前言&#xff1a; 五大类注解 Controller Service Repository Component Configuration JavaEE标准分层 阿里分层结构 BeanName命名规则 方法注解 Bean 注入方式取Bean 属性注入 Setter注入 构造方法注入 Resource 前言&#xff1a; 使用Spring容器&…

Linux-驱动开发-基础温习

一、裸机开发和驱动开发的区别&#xff1a; 裸机开发&#xff1a;底层&#xff08;相对于linux来说&#xff09;&#xff0c;库 二、linux驱动开发-根据各种框架进行开发 1、 外设比较多&#xff0c;资源多&#xff0c;资料非常少&#xff0c;官方的SDK;直接操作寄存器不显示…

Python 基础(十):元组

❤️ 博客主页&#xff1a;水滴技术 &#x1f338; 订阅专栏&#xff1a;Python 入门核心技术 &#x1f680; 支持水滴&#xff1a;点赞&#x1f44d; 收藏⭐ 留言&#x1f4ac; 文章目录 一、声明元组二、访问元组三、修改元组变量四、遍历元组五、切片六、常用函数和方法6.…

SpringBoot实现导出Excel功能

1 问题背景 需求要做一个导出excel的功能 2 前言 本篇着重阐述后端怎么实现&#xff0c;前端实现的部分只会粗略阐述。该实现方案是经过生产环境考验的&#xff0c;不是那些拿来练手的小demo。本文阐述的方案可以借鉴用来做毕设或者加到自己玩的项目中去。 3 实现思路 后端查询…

103. 二叉树的锯齿形层序遍历【191】

难度等级&#xff1a;中等 上一篇算法&#xff1a; 104. 二叉树的最大深度【75】 力扣此题地址&#xff1a; 103. 二叉树的锯齿形层序遍历 - 力扣&#xff08;Leetcode&#xff09; 1.题目&#xff1a;103. 二叉树的锯齿形层序遍历 给你二叉树的根节点 root &#xff0c;返回其…

p65 内网安全-域环境工作组局域网探针方案

数据来源 基本概念 DMZ区域&#xff1a;称为“隔离区”&#xff0c;也称‘’非军事化区/停火区” 工作组&#xff08;Work Group&#xff09;是局域网中的一个概念。它是最常见最简单最普通的资源管理模式&#xff0c;就是将不同的电脑按功能分别列入不同的组中&#xff0c;以…

完美解决丨except NameError:

示例如下&#xff1a; try: print(xx) except: print(xx is not defined) print(continue) 解决办法 第一种解决办法&#xff1a; try: print(xx) except NameError: print(xx is not defined) print(continue) 第二种解决办法&#xff1a; print(xx) if xx in locals() e…

camunda工作流user task如何使用

在Camunda中使用User Task通常需要以下步骤&#xff1a; 1、创建User Task&#xff1a;使用BPMN 2.0图形化设计器&#xff08;如Camunda Modeler&#xff09;&#xff0c;将User Task元素拖到流程图中&#xff0c;并为任务命名&#xff0c;指定参与者&#xff08;用户或用户组…

第二章 Maven 核心程序解压和配置

第一节 Maven核心程序解压与配置 1、Maven 官网地址 首页&#xff1a; Maven – Welcome to Apache Maven(opens new window) 下载页面&#xff1a; Maven – Download Apache Maven(opens new window) 下载链接&#xff1a; 具体下载地址&#xff1a;https://dlcdn.apac…

算法:(力扣)(牛客)打印螺旋矩阵题

手撕螺旋矩阵 题目思路解题 题目 描述&#xff1a;给定一个m x n大小的矩阵&#xff08;m行&#xff0c;n列&#xff09;&#xff0c;按螺旋的顺序返回矩阵中的所有元素。数据范围&#xff1a;0 \le n,m \le 100≤n,m≤10&#xff0c;矩阵中任意元素都满足 |val| \le 100∣val…

makefile 规则的覆盖

makefile 中经常会使用规则的覆盖&#xff0c;同样一个target 可能有多个prerequisites&#xff0c;这种依赖关系可以放到一起&#xff0c;也可以分开指定。 例1&#xff1a; test1:echo "test111"test2:echo "test222"test3:echo "test333"he…

vsync-app 不稳定导致抖动

问题描述&#xff1a;跟对比机器对比uc 浏览器新闻页滑动场景&#xff0c;出现抖动 1、trace 看是没有丢帧&#xff0c;对比看送帧buffer 给到 SF 步调不够一致&#xff0c;从间隔较大的两个 送帧buffer看&#xff0c;发现vsync-app 时间比正常的要长3ms 左右&#xff0c;vsync…

网络交换机端口管理工具

如今&#xff0c;企业或组织级网络使用数百个交换机端口作为其 IT 基础架构的一部分来实现网络连接。这使得交换机端口管理成为日常网络管理任务的一部分。传统上&#xff0c;网络管理员必须依靠手动网络交换机端口管理技术来跟踪交换机及其端口连接状态。这种手动任务弊大于利…

基于斯坦福大学开源,从零搭建chatGPT

下载地址&#xff1a; https://huggingface.co/datasets/togethercomputer/RedPajama-Data-1T 预处理仓库&#xff1a;https://github.com/togethercomputer/RedPajama-Data 复刻ChatGPT&#xff01;斯坦福等开启红睡衣计划&#xff0c;开源1.2万亿token训练集 【新智元导读…

JAVA队列(Queue)用法附实例讲解

队列是什么 队列用于模拟队列这种数据结构&#xff0c;队列通常是指“先进先出”的容器。新元素插入&#xff08;offer&#xff09;到队列的尾部&#xff0c;访问元素&#xff08;poll&#xff09;操作会返回队列头部的元素。通常&#xff0c;队列不允许随机访问队列中的元素 …