小程序的组件和样式

一:创建自定义组件
1.1创建组件

创建步骤.png

①根目录下新建components文件夹,里面新建xxx文件夹
②xxx文件夹右键选中新建component,自动创建.js .wxml...文件

1.2引用组件

引用组件.png

1.3局部引用组件

局部引用组件.png

1.4全局引用

全局引用.png

1.5使用建议

使用建议.png
1.6组件与页面的区别
组件与页面的区别.png

1.7组件样式隔离

组件样式隔离.png
1.8组件样式隔离的注意点
组件样式隔离的注意点.png
1.9 修改组件的样式隔离选项

  options: {
    styleIsolation: 'isolated' 
      // 默认值 isolated(启动隔离)、 
      // apply-shared(页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面) 、
      // shared(wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件)、
  }
})

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

二:数据,方法,属性和数据监听
2.1data数据

组件data数据.png

2.2method方法

image.png
2.3属性
属性.png
2.4data和properties的区别
image.png

2.5使用setData修改properties中的值

image.png
2.6数据监听器

只能使用在自定义组件中，在页面中是无法使用的

数据监听器.png

2.6.1监听Component内的属性

放在此处是，可监听当前子组件内data、props内数据的变动。" ** "为通配符，可监听所有数据的变动

image.png 单个或多个属性变化.png

2.6.2监听对象中所有属性的变化

image.png

2.6.3纯数据字段

纯数字字段.png
纯数组字段的使用.png
三:小程序组件的生命周期
3.1生命周期
组件的生命周期.png
主要生命周期的作用.png

3.2lifetimes节点

lifetimes节点.png
3.3组件所在页面的生命周期
组件所在页面的生命周期.png
3.4pageLifrtimes节点
pageLifrtimes节点.png
四:自定义组件的插槽
4.1什么是插槽
插槽定义.png
4.2单个插槽
插槽.png
4.3启用多个插槽
启用多个插槽.png

4.4定义和使用多个插槽

定义多个插槽.png
使用多个插槽.png
五:父子组件间的通信
5.1父子组件通信的3中方式
父子组件通信的3中方式.png
5.2属性绑定
父组件传值.png
子组件接收.png
5.3事件绑定
事件绑定步骤.png
①.png
②.png
③.png
④.png
5.4获取组件的实例
image.png
5.5behaviors
概念.png
5.5.1behaviors的工作方式
behaviors的工作方式.png
------使用步骤------:
①创建behaviors
创建behaviors.png

②导入并使用behaviors

导入并使用behaviors.png

5.6behaviors中可用的节点(红色为常用的节点)

image.png
behaviors同名字段的的组合覆盖规则:
同名字段的的组合覆盖规则.png

1、如果有同名的属性或方法，组件本身的属性或方法会覆盖 behavior 中的属性或方法，如果引用了多个 behavior ，在定义段中靠后 behavior中的属性或方法会覆盖靠前的属性或方法；
2、如果有同名的数据字段，如果数据是对象类型，会进行对象合并，如果是非对象类型则会进行相互覆盖；
3、生命周期函数不会相互覆盖，而是在对应触发时机被逐个调用。如果同一个 behavior 被一个组件多次引用，它定义的生命周期函数只会被执行一次
组件相关总结:

image.png