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

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、自定义组件所在页面的生命周期

相关推荐
汇能感知15 小时前
摄像头模块在运动相机中的特殊应用
经验分享·笔记·科技
阿巴Jun15 小时前
【数学】线性代数知识点总结
笔记·线性代数·矩阵
茯苓gao15 小时前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
是誰萆微了承諾16 小时前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang
DKPT16 小时前
Java内存区域与内存溢出
java·开发语言·jvm·笔记·学习
aaaweiaaaaaa16 小时前
HTML和CSS学习
前端·css·学习·html
ST.J17 小时前
前端笔记2025
前端·javascript·css·vue.js·笔记
Suckerbin17 小时前
LAMPSecurity: CTF5靶场渗透
笔记·安全·web安全·网络安全
看海天一色听风起雨落17 小时前
Python学习之装饰器
开发语言·python·学习
小憩-17 小时前
【机器学习】吴恩达机器学习笔记
人工智能·笔记·机器学习