![](https://img.haomeiwen.com/i8934731/bac0a7e1902f3c25.png)
![](https://img.haomeiwen.com/i8934731/a6903a3af6b90df6.png)
自定义组件
组件的创建与引用
1.创建组件
![](https://img.haomeiwen.com/i8934731/9cd84c9fc6182c5e.png)
![](https://img.haomeiwen.com/i8934731/8ae57d6f19c5d964.png)
2.引用组件
组件的引用方式分为“局部引用”和“全局引用”,顾名思义:
局部引用:组件只能在当前被引用的页面内使用
全局引用:组件可以在每个小程序页面中使用
3.局部引用
![](https://img.haomeiwen.com/i8934731/f702eb6f1fbe8ca6.png)
4.全局引用组件
在app.json 全局配置文件中引入组件的方式,叫做“全局引用”。
![](https://img.haomeiwen.com/i8934731/b4e1bd37a098a3d3.png)
全局引用组件和局部引用的使用场景就是 来看组件的使用频率和范围来进行引入。
6.组件和页面的区别
![](https://img.haomeiwen.com/i8934731/b4321788abb147d8.png)
7.组件的样式隔离
![](https://img.haomeiwen.com/i8934731/786634ba78e2f0d5.png)
8.组件样式的注意点
app.wxss中 定义的全局样式是无法影响到组件的样式
只有class选择器会有样式隔离效果,id选择器,属性选择器,标签选择器不受样式隔离效果。
建议:在组件和引用组件的页面中 建议使用class选择器,不要使用id 属性 标签选择器。
9.修改组件的样式隔离选项
![](https://img.haomeiwen.com/i8934731/c84946407ec56a69.png)
![](https://img.haomeiwen.com/i8934731/34d1009cc0d9e112.png)
10 自定义组件中的 数据 方法 和属性
data数据
![](https://img.haomeiwen.com/i8934731/a79ecb7236c105d3.png)
methods方法
![](https://img.haomeiwen.com/i8934731/56a3213b34dc5f7b.png)
properties属性
在小程序组件中,properties是对组件的对外属性,用来接收外界传递到组件中的数据。示例代码如下:
![](https://img.haomeiwen.com/i8934731/c24677e87803480b.png)
data和properties的区别
![](https://img.haomeiwen.com/i8934731/fe448f7acf765ff0.png)
使用setData 修改 properties的值
![](https://img.haomeiwen.com/i8934731/fbe408a4fc9dc8f1.png)
11. 数据监听器
![](https://img.haomeiwen.com/i8934731/9928654ae5d5db73.png)
组件数据监听器的基本用法
![](https://img.haomeiwen.com/i8934731/6db758022baa583f.png)
![](https://img.haomeiwen.com/i8934731/993676960ac400d2.png)
监听对象属性的变化
数据监听器支持监听对象中单个或者多个属性的变化:
![](https://img.haomeiwen.com/i8934731/2a40744701c463d2.png)
网友评论