组件的创建，引用，样式隔离以及methods,data,properties和数据事件监听

news2024/10/6 14:27:51

组件的创建，引用，样式隔离以及methods,data,properties和数据事件监听

  • 1. 组件的创建
  • 2. 组件的引用
    • 2.1. 局部引用
    • 2.2. 全局引用
    • 2.3. 组件和页面的区别
  • 3. 组件的样式隔离
    • 3.1. 默认情况，组件样式隔离性
    • 3.2. 修改组件的样式隔离选项
  • 4. 组件的data,methods和properties
    • 4.1. 组件中的data
    • 4.2. 组件的methods
    • 4.3. 组件的properties
    • 4.4. data 与 properties 的异同
  • 5. 组件的数据监听器
    • 5.1. 字段上的数据监听格式
    • 5.2. 对象属性上的数据监听格式
    • 5.3. **通配符的数据监听格式
    • 5.4. 数字求和的数据监听小demo
    • 5.5. 颜色RGB按钮的数据监听小demo

1. 组件的创建

组件的创建，在项目的根目录下创建components文件夹（只是为了见名知意），然后点击右键新建component即可。

在这里插入图片描述

点击新建component之后，会自动为你创建四个文件，.js,.json,.wxml,.wxss

在这里插入图片描述

注意：为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中

2. 组件的引用

组件的引用方式分为“局部引用”和“全局引用”，
局部引用：组件只能在当前被引用的页面内使用。
全局引用：组件可以在每个小程序页面中使用。

2.1. 局部引用

局部引用组件，只需要在需要使用该组件的页面的.json文件中进行配置即可。局部引用组件，只能在当前页面进行引用。

格式如下，我们只需要在usingComponents中设定组件，以键值对的方式设定即可。
"usingComponents": {组件名:组件位置,}

例如：

{
  "usingComponents": {
      "my-component":"/components/test/test"
  }
}

使用方式：

<my-component></my-component>

2.2. 全局引用

全局引用同理，则需要在当前应用的的.json文件中进行配置。
全局引用配置，则可以在当前应用的所有页面进行使用

{
  "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#13A7A0",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  // 全局引用组件
  "usingComponents": {
      "my-component2":"/components/test/test"
  },
}

使用方式：

<my-component2></my-component2>

2.3. 组件和页面的区别

从文件组成结构来看，组件和页面的构成都是由.js,.json,.wxml,.wxss文件组成，但是其中.js与.json文件有明显不同。

.json文件，组件的.json文件中需要声明 “component”: true 属性

在这里插入图片描述

.js 文件，组件的.js文件中调用的是component函数，页面的.js文件中调用的是page函数。

在这里插入图片描述

组件的方法下需要定义到methods中，而页面的话方法是可以随意定义的只要在Page函数中就行。

3. 组件的样式隔离

3.1. 默认情况，组件样式隔离性

默认情况下，组件的样式具有隔离性，即自定义组件的样式只会对当前组件生效，不会影响到组件之外的其他元素。同时组件的样式也不会影响到外界其他元素的样式。

tips:只有class选择器会有样式的隔离效果，id选择器，属性选择器，标签选择器不受样式隔离的影响。

3.2. 修改组件的样式隔离选项

虽然默认情况下，自定义组件的样式隔离性能够防止组件内外样式互相干扰的问题。可以通过配置 option 中的 styleIsolation 的值来修改组件的样式隔离选项。

其中styleIsolation 可以配置的值有 isolated,apply-shared和shared

styleIsolation 选项从基础库版本 2.6.5 开始支持：
● isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
● apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
● shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）

Component({
    properties: {},

    data: {},
  
    methods: {},
  
    options:{styleIsolation :'isolated'}
})

4. 组件的data,methods和properties

4.1. 组件中的data

在小程序组件中，用于组件模板渲染的私有数据，需要定义到 data 节点中（与页面的data作用是一样的）。

// components/test/test.js
Component({
  
    /**
     * 组件的初始数据
     */
    data: {
        count:0
    },
}

4.2. 组件的methods

在小程序组件中，事件处理函数和自定义方法需要定义到 methods 节点中.
一般情况下为了区分事件处理函数和自定义方法，我们在自定义方法前加一个下划线以示区分。

// components/test/test.js
Component({
    methods: {
        // bindTap 绑定的事件处理函数
        addCount(){
            this.setData({
                count:this.data.count+1
            })
            this._showCount()
        },
      	// 自定义的方法
         _showCount(){
            console.log(this.data.count)
        }
    },
}

4.3. 组件的properties

在小程序组件中，properties 是组件的对外属性，用来接收外界传递到组件中的数据.

// components/test/test.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        // 简写定义，可以忽略默认值，只给数据类型
        max:Number,
        // 完整定义
        age:{
            type:Number,
            value:20
        }
    },
}

当我们在组件的properties中声明了属性，那么我们在组件中就可以使用这些属性。

<my-component max="20" age="10"></my-component>

4.4. data 与 properties 的异同

在组件中，data与properties都是用来存放数据的，用法也都一样。

只不过data 更倾向于存储组件的私有数据,properties 更倾向于存储外界传递到组件中的数据

由于 data 数据和 properties 属性在本质上没有任何区别，因此 properties 属性的值也可以用于页面渲染，或使用 setData 为 properties 中的属性重新赋值。

组件的js部分

// components/test/test.js
Component({
  /**
     * 组件的属性列表
     */
  properties: {
    // 简写定义，可以忽略默认值，只给数据类型
    max:Number,
    // 完整定义
    age:{
      type:Number,
      value:20
    }
  },

  /**
     * 组件的初始数据
     */
  data: {
    count:0
  },

  /**
     * 组件的方法列表
     */
  methods: {
    addCount(){
      this.setData({
        count:this.data.count+1,
        max:this.properties.max+1
      })
      this._showCount()
    },
    _showCount(){
      console.log(this.data.count)
    }
  },
  options:{
    styleIsolation :'apply-shared'
  }
})

组件的wxml部分

<!--components/test/test.wxml-->
<text class="t-color t-bold">components/test/test.wxml</text>
<view>{{max}}</view>
<button bindtap="addCount">+1</button>

页面的效果：

在这里插入图片描述

5. 组件的数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作（一般都是监听setData的数据，即当有data中的字段或者对象被setData时就会触发数据监听）

在组件中，需要在组件的.js文件中配置observers配置项即可，格式如下：

5.1. 字段上的数据监听格式

// components/test/test.js
Component({
  	// 组件的data数据监听，只要字段A或者字段B发生了变化，都会触发数据监听器
    observers:{
        '字段A,字段B':function(字段A的新值,字段B的新值){
            // 函数体 ---- 字段A或字段B被setData赋新值时会触发
        }
    }
})

这里的字段A，字段B可以是任意多个的字段，如果太多则可以使用**通配符来匹配。

5.2. 对象属性上的数据监听格式

对象的属性上的数据监听，只需要以对象.属性的方式即可。

// components/test/test.js
Component({
  	// 组件的data数据监听，只要字段A或者字段B发生了变化，都会触发数据监听器
    observers:{
        '对象.属性A,对象.属性B':function(对象.属性A的新值,对象.属性B的新值){
            // 函数体 ---- 对象的属性A或属性B,被setData赋新值时会触发
        }
    }
})

5.3. **通配符的数据监听格式

**通配符，可以用作匹配任意字段，也可以用作匹配对象的任意属性

  1. 匹配任意字段
// components/test/test.js
Component({
  	// 组件的data数据监听，只要字段A或者字段B发生了变化，都会触发数据监听器
    observers:{
        '**':function(){
            // 函数体 ---- 数据的任意setData都会触发
        }
    }
})
  1. 匹配对象的任意属性
// components/test/test.js
Component({
  	// 组件的data数据监听，只要字段A或者字段B发生了变化，都会触发数据监听器
    observers:{
        'obj.**':function(newObj){
            // 函数体 ---- 对象的任意属性的setData都会触发
        }
    }
})

5.4. 数字求和的数据监听小demo

组件的结构（.wxml）

<view>{{num1}} + {{num2}} = {{sum}}</view>
<button bindtap="addNum1">num1+1</button>
<button bindtap="addNum2">num2+1</button>

组件的.js部分

// components/test2/test2.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
        num1:0,
        num2:0,
        sum:0
    },

    /**
     * 组件的方法列表
     */
    methods: {
        addNum1(){
            this.setData({
                num1:this.data.num1+1
            })
        },
        addNum2(){
            this.setData({
                num2:this.data.num2+1
            })
        }
    },

    // 数据监听器
    observers:{
        'num1,num2':function(newNum1,newNum2){
            this.setData({
                sum:newNum1+newNum2
            })
        }
    }
})

组件的全局引用，为了方便就直接全局引用了(app.json)

{
  "usingComponents": {
      "my-test2":"/components/test2/test2"
  },
}

页面的使用

<my-test2></my-test2>

在这里插入图片描述

5.5. 颜色RGB按钮的数据监听小demo

组件wxml部分：

<view style="background-color: rgb({{fullColor}});" class="colorBox">
  颜色值:{{fullColor}}    
</view>

<button size="mini" bindtap="changeR" type="default">R</button>
<button size="mini" bindtap="changeG" type="primary">G</button>
<button size="mini" bindtap="changeB" type="warn">B</button>

组件wxss部分：

.colorBox{
  line-height: 200rpx;
  font-size: 24rpx;
  color:white;
  text-shadow: 0rpx 0rpx 2rpx black;
  text-align: center;
}

组件js部分：

// components/test3/test3.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
        rgb: {
            r: 0,
            g: 0,
            b: 0
        },
        fullColor: '0,0,0'
    },

    /**
     * 组件的方法列表
     */
    methods: {
        changeR: function () {
            this.setData({
                'rgb.r': this.data.rgb.r + 5 > 255 ? 255 : this.data.rgb.r + 5
            })
        },
        changeG: function () {
            this.setData({
                'rgb.g': this.data.rgb.g + 5 > 255 ? 255 : this.data.rgb.g + 5
            })
        },
        changeB: function () {
            this.setData({
                'rgb.b': this.data.rgb.b + 5 > 255 ? 255 : this.data.rgb.b + 5
            })
        }
    },

    observers:{
        // 监听 rgb对象的所有属性的setData
        'rgb.**':function(obj){
            this.setData({
                fullColor:`${obj.r},${obj.g},${obj.b}`
            })
        }
    }
})

全局配置引用组件：

{
  "usingComponents": {
      "my-test3":"/components/test3/test3"
  },
}

页面使用组件及效果：

<my-test3></my-test3>

在这里插入图片描述

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

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

相关文章

短视频抖音seo矩阵系统源码开发者思路（一）

短视频抖音seo矩阵系统源码开发者思路（一）

一套优秀的短视频获客系统&#xff0c;支持短视频智能剪辑、短视频定时发布&#xff0c;短视频排名查询及优化&#xff0c;短视频智能客服等&#xff0c;那么短视频seo系统具体开发应该具备哪些功能呢&#xff1f;今天小编就跟大家分享一下我们的技术开发思路。 抖音矩阵系统源…
阅读更多...
go-zero微服务实战——etcd服务注册与发现

go-zero微服务实战——etcd服务注册与发现

etcd简介 浅谈etcd服务注册与发现 etcd官网 etcd中文文档 apt安装etcd&#xff0c;启动命令十分简单etcd。 etcd分为v2版本和v3版本&#xff0c;命令有所不一样&#xff0c;使用命令etcdctl h查看 如上图所示并没有出现API的版本&#xff0c;此时是使用默认的v2版本&#x…
阅读更多...
android editText获取不到数据

android editText获取不到数据

问题分析&#xff1a;在onActivityCreated一开始就创建了findViewById&#xff0c;这时获取的是默认值&#xff0c;需要在点击按钮时重新加载才能获取到输入数据。 需要在点击按钮时重新加载数据&#xff1a;
阅读更多...
Android Studio中java编程时禁止生成警告

Android Studio中java编程时禁止生成警告

1、打开Android Studio&#xff0c;进入主界面 2、进入软件后&#xff0c;点击菜单栏的File 3、在File选项中选择Settings 4、进入Settings选择Version Control -> Subversion -> Presentation 5、去掉勾选 Show merge source in history and anotations 6、最后点击确定…
阅读更多...
在vite创建的vue3项目中使用Cesium加载czml路径信息和无人机模型

在vite创建的vue3项目中使用Cesium加载czml路径信息和无人机模型

在vite创建的vue3项目中使用Cesium加载czml路径信息和无人机模型 用到的区域文件、地图标记文件、路径信息文件、模型文件 提取码&#xff1a;99jq 使用vite创建vue3项目 npm create vitelatestcd到创建的项目文件夹中 npm install安装Cesium npm i cesium vite-plugin-cesium…
阅读更多...
一文详解常见标准化组织

一文详解常见标准化组织

从事软件研发工作多年&#xff0c;在工作中有时会查阅一些通信相关的国际标准。然而&#xff0c;对于制定这些标准的组织&#xff0c;一直缺乏一个系统的了解。本文将对几个常见的标准化组织进行介绍&#xff0c;其中包括ITU、3GPP、GSMA和CCSA&#xff0c;了解它们的背景、成立…
阅读更多...
零基础学习C#编程的步骤和建议

零基础学习C#编程的步骤和建议

如果你是零基础&#xff0c;希望学习C#编程语言&#xff0c;以下是一些建议的学习步骤&#xff1a; 基础概念和语法&#xff1a;开始学习C#之前&#xff0c;了解基本的编程概念和语法是很重要的。可以通过在线教程、编程书籍或视频教程来学习C#的基础知识&#xff0c;包括变量…
阅读更多...
JVM中类加载的过程

JVM中类加载的过程

文章目录 一、类加载是什么二、类加载过程1.加载2.验证3.准备4.解析5.初始化 三、什么时候进行类加载四、双亲委派模型1.三大类加载器2.加载过程 总 一、类加载是什么 把.class文件加载到内存中&#xff0c;得到类对象的过程。 二、类加载过程 1.加载 找到.class文件&#xff…
阅读更多...
数据预处理matlab

数据预处理matlab

matlab数据的获取、预处理、统计、可视化、降维 数据的预处理 - MATLAB & Simulink - MathWorks 中国https://ww2.mathworks.cn/help/matlab/preprocessing-data.html 一、数据的获取 1.1 从Excel中获取 使用readtable() 例1&#xff1a; 使用spreadsheetImportOption…
阅读更多...
给大家推荐几款好用的格式转换工具

给大家推荐几款好用的格式转换工具

在数字化时代&#xff0c;我们经常需要处理各种不同的文件格式。有时我们可能需要将视频转换为适用于特定设备的格式&#xff0c;有时又需要将音频文件转换为可编辑的格式&#xff0c;或者将文档转换为更通用的类型。这就是格式转换工具的重要性所在。然而&#xff0c;在众多的…
阅读更多...
纯css3实现小鸡从鸡蛋破壳而出动画特效

纯css3实现小鸡从鸡蛋破壳而出动画特效

实现一个使用纯css3实现小鸡破壳的效果 示例效果如下所示 示例代码 <template><div><div class"eggWrapper"><div class"chickHead"><div class"eyeDiv"></div><div class"eyeDiv"></di…
阅读更多...
一文详解 Okio 输入输出流

一文详解 Okio 输入输出流

在 OkHttp 的源码中&#xff0c;我们经常能看到 Okio 的身影&#xff0c;这篇文章&#xff0c;我们把Okio拿出来进行一个详细的介绍学习。 输入输出的概念简述Okio 简介工程中引入 OkioAPI 简介及使用介绍 一、输入输出 在正式介绍 Okio 之前&#xff0c;让我们先回忆一下输…
阅读更多...
STM32自学笔记14-步进电机驱动项目-TB67H450驱动

STM32自学笔记14-步进电机驱动项目-TB67H450驱动

目前的项目是一种2相4线步进电机的闭环驱动电路&#xff0c;使用的电机驱动芯片是TB67H450&#xff0c;再使用磁编码器MT6816&#xff0c;使用FOC算法&#xff0c;基于STM32F1单片机。 这一节是步进电机的驱动芯片驱动研究 首先研究驱动芯片TB67H450的datasheet 这是一个PWM斩…
阅读更多...
11_SPI_Flash 读数据实验

11_SPI_Flash 读数据实验

11_SPI_Flash 读数据实验 1. 实验目标2. 操作时序2.1 数据读操作指令2.2 数据读操作时序 3. 流程框图3.1 顶层模块3.2 数据读模块 4. 波形图绘制5. RTL5.1 flash_read_ctrl5.2 spi_flash_read 6. testbench 1. 实验目标 使用页写或连续写操作向 Flash 芯片写入数据&#xff0c…
阅读更多...
火山引擎 DataLeap 构建Data Catalog系统的实践（三）：关键技术与总结

火山引擎 DataLeap 构建Data Catalog系统的实践（三）：关键技术与总结

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 关键技术 构建一个好的Data Catalog系统&#xff0c;需要考虑的核心产品设计和技术设计有很多。篇幅所限&#xff0c;本文只概要介绍技术设计中最核心重要的部分&a…
阅读更多...
工作日志2 input 的事件优先级 字符串.trim() this.$set()的应用 获取jq的自定义属性

工作日志2 input 的事件优先级 字符串.trim() this.$set()的应用 获取jq的自定义属性

input 的事件优先级 1.input输入框的事件 字符串.trim() 除去前后空格的方法 undefind不可以使用 this.$set()的应用
阅读更多...
苹果Mac动态壁纸软件Dynamic Wallpaper

苹果Mac动态壁纸软件Dynamic Wallpaper

Dynamic Wallpaper 是一款桌面壁纸管理软件&#xff0c;它提供了动态壁纸的功能。动态壁纸是指可以在一段时间内自动更改外观的壁纸&#xff0c;比如根据时间或其他条件进行变化。这种壁纸可以为用户提供更加生动有趣的桌面体验。 Dynamic Wallpaper 软件具有以下特点和功能&am…
阅读更多...
基于Java+SpringBoot+Vue的中小企业财务管理系统设计与实现

基于Java+SpringBoot+Vue的中小企业财务管理系统设计与实现

博主介绍&#xff1a;✌擅长Java、微信小程序、Python、Android等&#xff0c;专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3fb; 不然下次找不到哟 Java项目精品实战案…
阅读更多...
Word之解决中文和英文混写导致字间距增大的问题(六)

Word之解决中文和英文混写导致字间距增大的问题(六)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…
阅读更多...
【2023裸辞失业后之初学Docker1】

【2023裸辞失业后之初学Docker1】

目录 Docker简介docker下载安装常用命令帮助启动类命令镜像命令容器命令 镜像分层概念commit命令本地镜像发布到腾讯云 docker容器数据卷宿主机和容器内添加容器卷案例读写规则容器卷的继承 学习视频来自 https://www.bilibili.com/video/BV1gr4y1U7CY Docker简介 Docker出现…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023