(四)小程序学习笔记——自定义组件

1、组件注册------usingComponents

(1)全局注册:在app.json 文件中配置 usingComponents进行注册,注册后可以在任意页面使用。

(2)局部注册,在页面的json文件中配置suingComponents进行注册,注册后只能子啊当前页面使用。

javascript 复制代码
 "usingComponents": {
 	 "custom-checkbox": "./components/custom-checkbox/custom-checkbox"
 }

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

接收:

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

访问:

javascript 复制代码
this.properties.label

修改:

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

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

3、wxml 自定义组件插槽------slot(同vue 的插槽一样)

  • 默认插槽:
  • 具名插槽:
javascript 复制代码
组件A
<view>
<slot name="slot-right">
</view>
组件B
<text slot="slot-right">具名插槽<text>

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

javascript 复制代码
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文件中

javascript 复制代码
Component({
  options: {
 	// styleIsolation: 'isolated'
 	// styleIsolation: 'apply-shared'
    styleIsolation: 'shared'
  },
 })

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

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

javascript 复制代码
  //用于监听数据属性是否发生了变化
  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)
javascript 复制代码
this.triggerEvent('myevent',this.data.num)
复制代码
(2)在父组件的自定义组件标签上通过ind方法监听发射的事件,同时绑定事件的处理函数,在事件的处理函数中通过对象获取到传递的数据。
javascript 复制代码
<custom bind:myevent='getData'></custom>

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

8、获取组件实例------selectComponent

this.selectComponent

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

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

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

相关推荐
云上艺旅6 小时前
K8S学习之基础七十四:部署在线书店bookinfo
学习·云原生·容器·kubernetes
你觉得2057 小时前
哈尔滨工业大学DeepSeek公开课:探索大模型原理、技术与应用从GPT到DeepSeek|附视频与讲义下载方法
大数据·人工智能·python·gpt·学习·机器学习·aigc
@PHARAOH7 小时前
WHAT - uni-app 条件编译技术
小程序·uni-app·条件编译
A旧城以西8 小时前
数据结构(JAVA)单向,双向链表
java·开发语言·数据结构·学习·链表·intellij-idea·idea
无所谓จุ๊บ8 小时前
VTK知识学习(50)- 交互与Widget(一)
学习·vtk
FAREWELL000758 小时前
C#核心学习(七)面向对象--封装(6)C#中的拓展方法与运算符重载: 让代码更“聪明”的魔法
学习·c#·面向对象·运算符重载·oop·拓展方法
吴梓穆8 小时前
UE5学习笔记 FPS游戏制作38 继承标准UI
笔记·学习·ue5
Three~stone9 小时前
MySQL学习集--DDL
数据库·sql·学习
齐尹秦9 小时前
HTML 音频(Audio)学习笔记
学习
V---scwantop---信9 小时前
英文字体:大胆都市街头Y2Y涂鸦风格品牌海报专辑封面服装字体 Chrome TM – Graffiti Font
笔记·字体