（四）小程序学习笔记——自定义组件

1、组件注册——usingComponents

（1）全局注册：在app.json文件中配置 usingComponents进行注册，注册后可以在任意页面使用。
（2）局部注册，在页面的json文件中配置suingComponents进行注册，注册后只能子啊当前页面使用。

 "usingComponents": {
 	 "custom-checkbox": "./components/custom-checkbox/custom-checkbox"
 }

2、properties——接收传递进来的属性，类似vue的props

接收：

  properties: {
    label: {
      //数据的类型只能是String、Array、Number、Boolean、Object
      //也可以为null,表示不限制类型
      type: String,
      value: ''
    }
  },

访问：

this.properties.label

修改：

this.setData({
	label:"在组件内部修改 Properties中的数据"
})

在JS中可以访问和获取properties中的数据，但是一般不建议修改，会造成数据流的混乱。

3、wxml 自定义组件插槽——slot（同vue 的插槽一样）

  • 默认插槽：
  • 具名插槽：
组件A
<view>
<slot name="slot-right">
</view>
组件B
<text slot="slot-right">具名插槽<text>

在自定义组件的js文件开启支持多slot：

Component({
  options: {
    multipleSlots: true
  },
 })

4、自定义组件的样式和注意事项

  1. 在自定义的wxss文件中，不允许使用标签选择器、ID 选择器、属性选择器。请使用class类选择器。
  2. 子选择器（.a>.b）只能用于view 和子组件，用于其他组件（标签）可能会导致样式失效。
  3. 继承样式，例如：color、font 等都会从组件外继承。
  4. （除继承样式外）全局样式、组件所在页面的样式文件中的样式都对自定义组件 无效。
  5. 官方不推荐做法： 不建议全局样式文件 、父级页面之间使用标签选择器设置样式。
  6. 组件和组件使用者如果使用了后代选择器（.a .b），可能会出现一些非预期情况

5、组件样式隔离——stylelsolation

stylelsolation：用于配置样式隔离选项。主要有三个属性值

  • isolated ：表示样式隔离，在自定义组件内外，使用了相同class属性的样式不会相互影响。默认值。
  • apply-shared：组件的使用者、页面的wxss样式可以影响自定义组件中的样式，但是自定义组件不会影响到外部组件使用者、页面的wxss设置的样式。
  • shared：组件的使用者、页面的wxss和自定义组件中的样式可以相互影响，甚至还可以影响到其他使用了 “apply-shared”、"shared"属性的自定义组件。

配置：在自定义组件的js文件中

Component({
  options: {
 	// styleIsolation: 'isolated'
 	// styleIsolation: 'apply-shared'
    styleIsolation: 'shared'
  },
 })

**注意：**自定义组件中不可以直接修改默认组件的样式，比如修改复选框的样式。如果想要修改需要 stylelsolation：“shared”；但是shared属性还会修改其他页面的样式、组件使用者的样式、以及其他使用了“apply-shared”\“shared”属性的自定义组件的样式。此时可以给可以使想要受影响的组件单独添加一个命名空间（类名）

6、自定义组件的数据监听器——observers（类似于vue->watch）

  //用于监听数据属性是否发生了变化
  observers:{
    //key：需要监听的数据
    //value:就是一个回调函数，形参：最新的数据
    num: function (newNum) {
    },

    //同时监听多个数据使用字符串，用逗号分隔
    "num，count": function (newNun, NewCount) {
    },
    //支持监听属性，以及内部数据的变化，使用数据路径
    "obj.name": function (newName) {
    },
    "arr[1]": function (newItem) {
      console.log(newItem)
    },
    //监听所有属性的变化使用通配符：**
    "obj.**": function (newObj) {
      console.log(newObj)
    }
  }

7、组件通信——父子组件传值

  • 父组件往子组件传值：
    （1）父组件wxml中使用数据绑定方式向子组件传递动态数据。
    （2）子组件通过properties接收父组件传递的数据。（如果需要将properties中的数据赋值给data中的数据，通过observers实现）
  • 子组件向父组件传值：
    （1）自定义组件内部使用triggerEvent方法发射一个自定义事件，同时可以携带数据。（类似于 $emit）

this.triggerEvent('myevent',this.data.num)

（2）在父组件的自定义组件标签上通过ind方法监听发射的事件，同时绑定事件的处理函数，在事件的处理函数中通过对象获取到传递的数据。

<custom bind:myevent='getData'></custom>

getData(event){
//event。detail 获取子组件传递给父组件的数据
console.log(event) 
}

8、获取组件实例——selectComponent

获取到子组件实例之后就可以任意访问子组件的数据和方法

  //获取子组件对象，参数为class选择器或者id选择器。
      const res = this.selectComponent(".child");
     // const res = this.selectComponent("#child");
      console.log(res.data.num)

9、自定义组件的生命周期

组件的生命周期：指的是组件自身的一些钩子函数，这些函数在特定的时间节点时被自动触发。
组件的生命周期函数需要在 lifetimes 字段内声明
组件的生命周期函数有5个： created（组件实例创建完毕）、attached（模版解析完成挂载到页面）、ready（组件渲染完成）、moved、detached（组件被销毁）
注意：自定义组件的created生命周期函数中不能使用setData，只能添加一些自定义的属性，可以通过this方法添加；一般在attached生命周期函数中做一些页面交互的执行。

  //组件实例被创建好后执行,此时不能再调用setData，在attached中使用，只能添加一些自定义的属性，可以通过this方式添加
    created() {
      console.log("created");
      //添加自定义属性
      this.test = "测试"
    },
    //组件被初始化完毕，模版解析完成，已经把组件挂载到页面上，一般页面中的交互在这执行。
    attached() {
      console.log("attached")
    },
    //组件被销毁时调用，
    detached() {
      console.log("detached")
    }

10、自定义组件所在页面的生命周期

组件还有一些特殊的生命周期，主要用于组件内部监听父组件的展示、隐藏状态，从未放那边组件内部执行一些业务逻辑的处理。
组件所在页面的生命周期有4个：show、hide、resize、routeDone，需要在**pageLifeftimes**字段内进行声明（也是在自定义组件的js文件中）。
在这里插入图片描述

  pageLifetimes:{
    //监听组件所在的页面展示（后台切前台）状态
    show(){

    },
    //监听组件所在页面的隐藏（前台切后台、点击tabBar）状态
    hide(){
      
    }
  }

11、小程序生命周期执行顺序

小程序的生命周期由 应用生命周期、页面生命周期和组件生命周期三部组成。

（1）小程序冷启动，钩子函数的执行顺序：

在这里插入图片描述

（2）保留当前页面和销毁当前页面，进入下一个页面，钩子函数的执行顺序：

在这里插入图片描述

（3）小程序热启动，钩子函数执行顺序：

在这里插入图片描述

12、使用Component构造页面

小程序页面也可以使用Component 方法进行构造
注意事项：
1、要求 .json文件中必须包含usingComonents字段
在这里插入图片描述
2、里面的配置项需要和ComPonent中的配置保持一致。
3、页面中Page 方法 有一些钩子函数、事件监听方法，这些钩子函数、事件监听方法必须在methods对象中
4、组件的属性 properties也可以接受页面的参数，在onLoad钩子函数中可以通过this.data进行获取。

为什么需要使用Component方法进行构造页面？

Component方法功能比Page 方法强大很多，如果使用Component方法构造页面，可以实现更加复杂的页面逻辑开发。

13、组件的复用机制**Behavior（{}）**

小程序的behavios方法是一种代码复用的方式，可以将一些通用的逻辑和方法提取出来，然后在多个组件中复用，然后在多个组件中复用，从而减少代码冗余，提高代码的可读性。

使用Behavior()方法，每个behavior可以包含一组属性、数据、生命受气函数和方法
组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。

在组件中新建一个behavior文件，将一些公用的属性，数据，方法导出

const behavior = Behavior({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    num: 9
  },

  /**
   * 组件的方法列表
   */
  methods: {
    sendData() {
      this.triggerEvent('myevent', this.data.num);
    }

  },

  //用于监听数据属性是否发生了变化
  // observers: {
  //   //key：需要监听的数据
  //   //value:就是一个回调函数，形参：最新的数据
  //   num: function (newNum) {
  //   },

  //   //同时监听多个数据使用字符串，用逗号分隔
  //   "num，count": function (newNun, NewCount) {
  //   },
  //   //支持监听属性，以及内部数据的变化，使用数据路径
  //   "obj.name": function (newName) {
  //   },
  //   "arr[1]": function (newItem) {
  //     console.log(newItem)
  //   },
  //   //监听所有属性的变化使用通配符：**
  //   "obj.**": function (newObj) {
  //     console.log(newObj)
  //   }
  // }
  //组件生命周期生命对象
  // lifetimes: {

  //   //组件实例被创建好后执行,此时不能再调用setData，在attached中使用，只能添加一些自定义的属性，可以通过this方式添加
  //   created() {
  //     console.log("created");
  //     //添加自定义属性
  //   },
  //   //组件被初始化完毕，模版解析完成，已经把组件挂载到页面上，一般页面中的交互在这执行。
  //   attached() {
  //     console.log("attached")
  //   },
  //   //组件被销毁时调用，
  //   detached() {
  //     console.log("detached")
  //   }
  // },

  // pageLifetimes:{
  //   //监听组件所在的页面展示（后台切前台）状态
  //   show(){

  //   },
  //   //监听组件所在页面的隐藏（前台切后台、点击tabBar）状态
  //   hide(){

  //   }
  // }
});

export default behavior;

组件的js文件引入behavior，并注册

import behavior from "./behavior"
Component({
  behaviors: [behavior]
})

注意：如果组件和behavior相同情况：

  • properties 相同，则采用就近原则，使用组件内部的数据
  • data 相同，如果是对象类型，属性会进行合并，如果不是对象类型的数据，就近原则，展示的以组件内部为准。
  • methods 相同:则采用就近原则，使用组件内部的数据
  • lifetimes 相同：如果存在相同的生命周期函数，生命周期函数都会被触发。先执行behavior里面的生命周期函数，再执行组件年内部的生命周期函数。

14、外部样式类——externalClassess定义若干个外部样式类

默认情况下，组件和组件使用者之间如果存在相同的类名，不会相互影响，组件使用者如果想自改组件的样式，需要就解除样式隔离。但是解除样式隔离后，在极端情况下，会产生样式冲突、css嵌套太深等问题，从而给我们开发带来一定的麻烦。

外部样式类：使用组件时，组件使用者可以给组件传入css类名，通过传入的类名修改组件的样式。
如果需要使用外部样式类修改组件的样式，在Component 中需要用 externalClasses若干外部样式类。

//自定义组件的js文件
Component({
  externalClasses:[],
})
//自定义组件的wxml组件
<view class="my-class box"> </view>

//父组件
<custom-checkbox  extend-class="my-class"></custom-checkbox>

//父组件的wxss文件
.my-class{
color:lightsalmon !important;
}

注意：
如果在同一个节点上，存在外部样式类和普通内部样式类，两个类的优先级都是未定义的。建议：在使用在不样式类时，样式需要通过 ！important添加权重

15、自定义组件总结：

在这里插入图片描述

自定义组件开发文档

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

探索APP内测分发的全过程(APP开发)

探索APP内测分发的全过程(APP开发)

什么是APP内测分发探索APP内测分发的全过程&#xff1f; APP内测分发是在应用程序开发过程中探索APP内测分发的全过程&#xff0c;开发者将应用程序的测试版或预发布版分发给特定用户进行测试、反馈和评估的一种方式。这是一个非常重要的环节&#xff0c;可以有效地提高应用的…
阅读更多...
Linux：冯诺依曼体系结构、操作系统、初识进程

Linux：冯诺依曼体系结构、操作系统、初识进程

文章目录 1.冯诺依曼体系结构总线与数据传输通路为什么有内存这个部分计算机存储结构 2.操作系统(Operator System)2.1 概念2.2 设计OS的目的2.3 理解“管理”先描述再组织 2.4 用户使用系统调用和库函数&#xff08;lib&#xff09;概念 总结 3.初识进程3.1 基本事实与引入3.2…
阅读更多...
JavaFX创建桌面应用exe文件以及SceneBuilder使用讲解

JavaFX创建桌面应用exe文件以及SceneBuilder使用讲解

文章目录 1 JavaFX1.1 引言1.2 简单使用1.2.1 搭建项目1.2.2 fxml文件1.2.3 生成exe文件 1.3 Idea中集成SceneBuilder1.4 注解讲解1.4.1 FXMLController1.4.2 FXML1.4.3 FXMLLoaderParameters1.4.4 FXMLProperty 1.5 SceneBuilder1.5.1 添加组件ControlsFX1.5.1.1页面展示 1.5.…
阅读更多...
Vue入门篇：样式冲突scoped，data函数，组件通信，prop data单向数据流，打包发布

Vue入门篇：样式冲突scoped，data函数，组件通信，prop data单向数据流，打包发布

这里写目录标题 1.组件的样式冲突scoped2.data函数3.组件通信1.两种组件关系分类和对应的组件通信方案2.父子通信方案的核心流程 4.prop & data、单向数据流5.打包发布6.打包优化:路由懒加载 1.组件的样式冲突scoped 默认情况:写在组件中的样式会全局生效→因此很容易造成多…
阅读更多...
PyCharm更换pip源、模块安装、PyCharm依赖包导入导出

PyCharm更换pip源、模块安装、PyCharm依赖包导入导出

一、Pycharm更换安装源 在下载安装好Pycharm后&#xff0c;一个在实际编程开发过程中非常重要的问题是第三方库添加&#xff0c;然而Python默认的源网络速度有点慢&#xff0c;因此&#xff0c;我们常常需要做的是更换Pycharm的安装源。 在当前最新版&#xff08;2022.03版&…
阅读更多...
Blender常见操作

Blender常见操作

1.局部视图&#xff1a;Local View&#xff0c;也可称作Solo模式&#xff0c;按快捷键 “/”进入&#xff0c;在按退出&#xff0c;只显示选中的物体&#xff08;可多选&#xff09;&#xff0c;方便编辑 2.物体合并&#xff1a;Ctrl J 其中&#xff0c;当选中多个物体时&am…
阅读更多...
XTuner微调LLM：1.8B、多模态和Agent-笔记四

XTuner微调LLM：1.8B、多模态和Agent-笔记四

本次课程由XTuner 贡献者李剑锋、汪周谦、王群老师讲解【XTuner 微调 LLM&#xff1a;1.8B、多模态和 Agent】课程 课程视频&#xff1a;http:// https://b23.tv/QUhT6ni 课程文档&#xff1a;https://github.com/InternLM/Tutorial/blob/camp2/xtuner/readme.md 两种Finetun…
阅读更多...
border-image-slice详细说明

border-image-slice详细说明

上一篇文章我们介绍了 border-image的用法&#xff0c;其中border-image-source、border-image-width、 border-image-outset都比较简单好理解&#xff0c;这边文章我们重点学一下border-image-slice 属性&#xff0c;它用于定义边框图像如何被切割并应用到元素的边框上。这个属…
阅读更多...
JavaScript 动态网页实例 —— 数值处理对象

JavaScript 动态网页实例 —— 数值处理对象

前言 Math对象用于进行数学运算。其属性是数学中一些常见的常数值，在程序中可以直接使用。Math对象的方法很多，主要完成一些常见的数学运算，如三角函数计算、乘方、开方、求对数等。在 Math 对象的方法中，除了random()之外的所有方法都需要一个或几个参数，并且其用法基本…
阅读更多...
【数据结构】为了节省空间，对于特殊矩阵我们可以这样做……

【数据结构】为了节省空间，对于特殊矩阵我们可以这样做……

特殊矩阵的压缩存储 导读一、数组与矩阵1.1 数组1.2 数组与线性表1.3 数组的存储结构1.4 矩阵在数组中的存储1.4.1 行优先存储1.4.2 列优先存储 二、特殊矩阵及其压缩存储三、对称矩阵及其存储3.1 方阵与对称矩阵3.2 对称矩阵的存储3.3 压缩存储的手动实现3.3.1 行优先存储3.3.…
阅读更多...
修改Ubuntu远程登录欢迎提示信息

修改Ubuntu远程登录欢迎提示信息

无论何时登录公司的某些生产系统&#xff0c;你都会看到一些登录消息、警告或关于你已登录服务器的信息&#xff0c;如下所示。 修改方式 1.打开ubuntu终端,进入到/etc/update-motd.d目录下面 可以发现目录中的文件都是shell脚本, 用户登录时服务器会自动加载这个目录中的文件…
阅读更多...
大白话理解IoC和DI

大白话理解IoC和DI

引言 Spring是Java领域最受欢迎的开发框架之一&#xff0c;其核心功能之一就是Spring容器&#xff0c;也就是IoC容器。这篇文章&#xff0c;我们就来聊聊Spring的两大核心功能&#xff0c;控制反转&#xff08;IOC&#xff09;和依赖注入&#xff08;DI&#xff09;。 文章思…
阅读更多...
Go 语言基础（二）【数组、切片、指针、map、struct】

Go 语言基础（二）【数组、切片、指针、map、struct】

1、数组 特别需要注意的是&#xff1a;在 Go 语言中&#xff0c;数组长度也是数组类型的一部分&#xff01;所以尽管元素类型相同但是长度不同的两个数组&#xff0c;它们的类型并不相同。 1.1、数组的初始化 1.1.1、通过初始化列表{}来设置值 var arr [3]int // int类型的数…
阅读更多...
09_Scala函数和对象

09_Scala函数和对象

文章目录 函数和对象1.函数也是对象 scala中声明了一个函数 等价于声明一个函数对象2.将函数当作对象来用&#xff0c;也就是访问函数&#xff0c;但是不执行函数结果3.对象拥有数据类型(函数类型)&#xff0c;对象可以进行赋值操作4.函数对象类型的省略写法&#xff0c;也就是…
阅读更多...
SCI一区 | MFO-CNN-LSTM-Mutilhead-Attention多变量时间序列预测（Matlab）

SCI一区 | MFO-CNN-LSTM-Mutilhead-Attention多变量时间序列预测（Matlab）

SCI一区 | MFO-CNN-LSTM-Mutilhead-Attention多变量时间序列预测&#xff08;Matlab&#xff09; 目录 SCI一区 | MFO-CNN-LSTM-Mutilhead-Attention多变量时间序列预测&#xff08;Matlab&#xff09;预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现MFO-CNN…
阅读更多...
常见公式的几何解释

常见公式的几何解释

本文旨在深入探讨常见数学公式的几何意义&#xff0c;通过直观的图形和解释&#xff0c;帮助读者更好地理解并掌握这些公式的本质。文章首先概述了公式与几何图形之间的紧密联系&#xff0c;然后选取了几个典型的数学公式&#xff0c;进行详细解析。每个公式都将配以相应的几何…
阅读更多...
vuex的学习

vuex的学习

首先下载vuex&#xff0c;然后建立一个目录在vueX中 接着在index。js文件夹中引入 引入后导出这个文件 在main.js文件中导入&#xff0c;这样vue就有了状态管理 接着我创建了2个组件&#xff0c;在 里边规定了一个num:0 在 打印出来就可以看见 映射函数mapState&#xff0c;必…
阅读更多...
数据结构算法——链表带环问题——数学深度解析

数据结构算法——链表带环问题——数学深度解析

前言:本节内容主要是讲解链表的两个问题 &#xff1a;1、判断链表是否带环&#xff1b; 2、一个链表有环&#xff0c; 找到环的入口点。 本节内容适合正在学习链表或者链表基础薄弱的友友们哦。 我们先将问题抛出来&#xff0c;友友们可以自己去力扣或者牛客网去找相应题目&…
阅读更多...
基于SSM的个人博客系统（四）

基于SSM的个人博客系统（四）

目录 5.3 博客类别管理模块 5.3.1 添加博客类别 5.3.2 修改博客类别 5.3.3 删除博客类别 5.3.4 显示博客类别 5.4 评论管理模块 5.4.1 审核评论 5.4.2 删除评论 前面内容请移步 基于SSM的个人博客系统&#xff08;三&#xff09; 个人博客系统的设计与实现免费源码…
阅读更多...
头歌：Spark GraphX—寻找社交媒体中的“影响力用户”

头歌：Spark GraphX—寻找社交媒体中的“影响力用户”

第1关：认识Pregel API 简介 Spark GraphX中提供了方便开发者的基于谷歌Pregel API的迭代算法，因此可以用Pregel的计算框架来处理Spark上的图数据。GraphX的Pregel API提供了一个简明的函数式算法设计，用它可以在图中方便的迭代计算，如最短路径、关键路径、n度关系等，也可以…
阅读更多...
最新文章

Copyright @ 2022~2023