微信小程序学习第7天——自定义组件（创建与引用、方法和属性、数据监听器、插槽）

离奇6厘米

已于 2023-02-10 11:23:35 修改

阅读量584

点赞数

分类专栏：小程序文章标签：微信小程序学习小程序

于 2023-02-07 21:42:36 首次发布

本文链接：https://blog.csdn.net/Vest_er/article/details/128908853

版权

小程序专栏收录该内容

11 篇文章 2 订阅

订阅专栏

一、组件的创建与引用

1、创建组件

① 在项目的根目录中，鼠标右键，创建 components -> test 文件夹
② 在新建的 components -> test 文件夹上，鼠标右键，点击“新建 Component”
③ 键入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss

2、引用组件

组件的引用方式分为全局引用和局部引用

// 在页面的.json文件中引入组件
{
  "usingComponents": {
    "my-test":"/components/test/test"
  }
}

// 在页面的.WXML文件中，使用组件
<my-test></my-test>

3、组件和页面的区别

① 组件的 .json文件中需要声明"component"：true属性
② 组件的 .js文件中调用的是Component()函数，页面的 .js文件中调用的是Page()函数
③ 组件的事件处理函数需要定义到methods节点中

二、自定义组件的样式

1、隔离性

自定义组件的样式只对当前组件生效，不会影响到组件之外的UI 结构

2、隔离的特点

① app.wxss 中的全局样式对组件无效
② 只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响

注意：在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器！

3、修改组件的样式隔离选项

可以通过styleIsolation属性修改组件的样式隔离选项

// 方法一：在组件的.js文件中新增如下配置
Component({
  options:{
    styleIsolation:'isolated'
  },
})

// 方法二：在组件的.json文件中新增如下配置
{
	 styleIsolation:'isolated'
}

4、styleIslation属性值

可选值	说明
isolated（默认值）	`开启样式隔离`，在自定义组件内外，使用class指定的样式`不会相互影响`
apply-shared	`页面WXSS样式可以影响自定义组件`，但自定义组件的WXSS样式不会影响到页面
`shared`	页面WXSS样式可以影响到自定义组件，自定义组件WXSS中指定的样式也会影响页面和其他设置了apply-shared 或 shared 的自定义组件

三、自定义组件的数据、方法和属性

1、data数据

用于组件模板渲染的私有数据，需要定义到 data 节点中

Component({
	data:{
		sum:0
	}
})

2、methods方法

事件处理函数和自定义方法需要定义到 methods 节点中

Component({
	methods：{
		addCount(){
			console.log(this.data.sum)
		}
	}
})

3、 properties 属性

properties 属性用来接收外界传递到组件中的数据

Component({
	properties：{
	   // 方法一：完整定义属性的方式
		sum:{
			type:Number,
			value:100
		},
		// 方法二：简化定义属性方式
		num:Number
	}
})

// 外界组件传递max的值为10
<my-test max="10"></my-test>

4、data和properties的区别

① data 数据和 properties 属性在本质上没有任何区别，两者都是可读可写的
② data 更倾向于存储组件的私有数据
③ properties 更倾向于存储外界传递到组件中的数据

5、使用setData修改properties的值

<view>max属性的值为：{{max}}</view>

Component({
	properties：{
		max:Number,
	},
	methods:{
		addCount(){
			this.setData({
				max:this.properties.max + 1 
			})
		}
	}
})

四、自定义组件的数据监听器

类似于 vue 中的watch 侦听器，用于监听和响应任何属性和数据字段的变化，从而执行特定的操作

1、基本语法

Component({
	observers：{
		"字段A,字段B" : function(字段A的新值，字段B的新值) {
			// 处理逻辑
		}
	}
})

2、监听对象属性的变化

数据监听器支持监听对象中单个或多个属性的变化

Component({
	observers：{
		"对象.属性A,对象.属性B" : function(属性A的新值，属性B的新值) {
			// 处理逻辑
		}
	}
})

如果某个对象中需要被监听的属性太多，为了方便，可以使用通配符 ** 来监听对象中所有属性的变化

observers：{
	"对象.**" : function(obj) {
		// 处理逻辑
	}
}

3、代码演示

// 组件的.WXML文件代码
<view>{{n1}} + {{n2}} = {{sum}}</view>
<button bindtap="add1">n1自增</button>
<button bindtap="add2">n2自增</button>

// 组件的.js文件代码
Component({
  data: {
    n1:0,
    n2:3,
    sum:0
  },

  methods: {
    add1(){
      this.setData({
        n1:this.data.n1 +1
      })
    },
    add2(){
      this.setData({
        n2:this.data.n2 +5
      })
    }
  },

  observers:{
    'n1,n2':function(n1,n2){
      this.setData({
        sum:n1+n2
      })
    }
  }
})

五、纯数据字段

1、纯数据字段定义

纯数据字段是指不用于界面渲染的data字段

应用场景：在一些情况下，某些data中的字段既不会展示到页面，也不会传递给其他组件，仅在自身组件内部使用，这些data字段可以设置为纯数据字段

好处：有助于提升页面更新的性能

2、使用规则

在options节点中，指定pureDataPattern属性为一个正则表达式

Component({
	options:{
		// 指定所有以_开头的数据字段为纯数据字段
		pureDataPattern:/^_/
	}
})

六、插槽

1、插槽定义

插槽主要用于承载组件使用者提供的WXML结构，在自定义组件的WXML结构中使用<slot>节点表示

2、单个插槽

在小程序中，默认每个自定义组件中只允许使用一个 <slot> 进行占位

 <!-- 组件的封装者 -->
<view>
	<view>这里有一个插槽</view>
	<slot></slot>
</view>

 <!-- 组件的使用者 -->
<component-tag-name>
	 <view>这是插入到组件slot中的内容</view>
 </component-tag-name>

3、启用多个插槽

在options节点中，指定multipleSlots属性为的值为true即可启用多个插槽

Component({
	options:{
		// 启用多个插槽
		multipleSlots: true
	}
})

4、定义多个插槽

可以在 <slot> 标签中通过 name属性 来区分不同的插槽

<view>
	<slot name="before"></slot>
	<slot name="after"></slot>
</view>

5、使用多个插槽

使用slot属性将节点插入到不同的<slot>中

<component-tag-name>
	 <view slot="before">这是插入到组件slot-before中的内容</view>
	 <view slot="after">这是插入到组件slot-after中的内容</view>
 </component-tag-name>