一.自定义组件
1.创建组件
①在项目的根目录中,鼠标右键,创建 components -> test 文件夹
②在新建的 components -> test 文件夹上,鼠标右键,点击"新建 Component "
③键入组件的名称之后回车,会自动生成组件对应的4个文件,后缀名分别为 js , json ,. wxml 和. wxss
注意,为了保证目录结构的清晰,建议把不同的组件存放到单独目录中,例如:
2.引用组件
组件的引用方式分为"局部引用"和"全局引用",顾名思义:
.局部引用:组件只能在当前被引用的页面内使用
.全局引用:组件可以在每个小程序页面中使用
3.局部引用组件
在页面的 json 配置文件中引用组件的方式,叫做"局部引用"。示例代码如下:
显示效果如下:
4.全局引用组件
在app。json全局配置文件中引用组件的方式,叫做“全局引用”,示例代码如下
5.全局引用 VS 局部引用
根据组件的使用频率和范围,来选择合适的引用方式:
.如果某组件在多个页面中经常被用到,建议进行"全局引用"
.如果某组件只在特定的页面中被用到,建议进行"局部引用"
6.组件和页面的区别
从表面来看,组件和页面都是由 js 、 json 、. wxml 和. wxss 这四个文件组成的。但是,组件和页面的 js 与 json 文件有明显的不同:
.组件的. json 文件中需要声明" component ": true 属性
.组件的 js 文件中调用的是 Component ()函数
.组件的事件处理函数需要定义到 methods 节点中
二.样式
1.组件样式隔离
默认情况下,自定义组件的样式只对当前组件生效,不会影响到组件之外的 UI 结构,如图所示:
.组件 A 的样式不会影响组件 C 的样式
.组件 A 的样式不会影响小程序页面的样式
.小程序页面的样式不会影响组件 A 和 C 的样式
好处:
防止外界的样式影响组件内部的样式
防止组件的样式破坏外界的样式
2.组件样式隔离的注意点
📌.app.wxss中的全局样式对组件无效
📌.只有 class 选择器会有样式隔离效果, id 选择器、属性选择器、标签选择器不受样式隔离的影响
例如:在app.json中写入时:
标签选择器会改变样式。
建议:
在组件和引用组件的页面中建议使用 class 选择器,不要使用 id 、属性、标签选择器!
3.修改组件的样式隔离选项
默认情况下,自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时,我们希望在外界能够控制组件内部的样式,此时,可以通过 stylelsolation 修改组件的样式隔离选项,用法如下:
4.stylesolation的可选值
三.数据,方法和属性
1.data数据
在小程序组件中,用于组件模板渲染的私有数据,需要定义到data节点中,示例如下:
2.methods方法
在小程序组件中,事件处理函数和自定义方法需要定义到methods节点中,示例代码如下:
3.properties属性
在小程序组件中,properties是组件的对外属性,用来接收外界传递到组件中的数据,示例代码如下:
页面.wxml中写入:
<my-test1 max="9"></my-test1>
当我们判断当按钮按倒9的时候还能否自增的话,需要if进行判断。
4.data和 properties 的区别
在小程序的组件中, properties 属性和 data 数据的用法相同,它们都是可读可写的,只不过:
. data 更倾向于存储组件的私有数据
. properties 更倾向于存储外界传递到组件中的数据
二者指向同一个
5.使用 setData 修改 properties 的值
由于 data 数据和 properties 属性在本质上没有任何区别,因此 properties 属性的值也可以用于页面渲染,或使用 setData 为 properties 中的属性重新赋值,示例代码如下:
四.数据监听器
1.什么是数据监听器
数据监听器用于监听和响应任何属性和数据字段的变化,从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。在小程序组件中,数据监听器的基本语法格式如下:
2.数据监听器的基本用法
组件的UI结构如下:
<view> {{n1}} + {{n2}} = {{sum}} </view>
<button bindtap="addN1">n1+1</button>
<button bindtap="addN2">n2+1</button>
组件的js文件代码:
实例效果:
data: {
n1: 0,
n2: 0,
sum: 0
},
methods: {
addN1(){
this.setData({
n1: this.data.n1 +1
})
},
addN2(){
this.setData({
n2: this.data.n2 +1
})
},
},
observers:{
'n1,n2' : function (newN1,newN2) {
this.setData({
sum : newN1 + newN2
})
}
}
界面效果如下:文章来源:https://www.toymoban.com/news/detail-616693.html
3.监听对象属性的变化
数据监听器支持监听对象中单个或多个属性的变化,实例语法如下:文章来源地址https://www.toymoban.com/news/detail-616693.html
到了这里,关于微信小程序——自定义组件组件的创建和引用,修改组件的样式隔离选项,stylesolation的可选值,properties属性,data数据,methods方法,数据监听器,用法,监听对象属性的变化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!