小程序中如何自定义组件呢

小程序中如何自定义组件

目标:掌握自定义组件的基本用法

01基本使用

1.创建组件

2.注册

分为页面注册和全局注册

页面注册在使用组件的页面配置(xxx.json文件)中通过usingComponents 进行注册

全局注册在app.json文件中通过usingComponents 进行注册

"usingComponents": {
    "my-test": "/components/MyTest/index"
}

02组件样式
03组件样式-外部样式类

04数据方法

data数据

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

Component({
	data: {
  	num: 100
  }
});

methods方法

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

Component({
	methods: {
  	handleAdd() {
      this.setData({
      	num: this.data.num + 1
      });
    },
    
    handleSub() {
      this.setData({
      	num: this.data.num - 1
      });
    }
  }
});

06组件插槽

掌握自定义组件中插槽的使用方式

什么是插槽？

在自定义组件的wxml结构中，我们可以提供一个节点，用于承载组件使用者提供的wxml结构。插槽可以方便开发者将不确定的、或者希望由用户去确定的交给用户去处理。

单个插槽

<!--components/MyTest2/index.wxml-->
<view>
  <text>components/MyTest2/index.wxml</text>
  <!-- 对于不确定的内容，可以使用slot进行占位，具体内容交给使用者确定 -->
  <slot></slot>
</view>

多插槽（具名插槽）

默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 .js(不是在配置文件中) 中声明启用。

05生命周期-lifetimes

组件的生命周期，是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

06 属性-properties

在小程序中，properties是组件的对外属性，用于接收外界传递到组件中的数据，示例如下：

Component({
	properties: {
    isOpen: Boolean,
  	min: Number, // 直接写类型
    max: {       // 写类型 + 初始值
    	type: Number,
      value: 10 // value用于指定默认值
    }
  }
})

07组件通讯

从父组件传值到子组件

<my-test isOpen max="9" min="1" />
<my-test isOpen="{{true}}" max="9" min="1" />

  
<my-test isOpen="{{false}}" max="9" min="1" />
<my-test isOpen="false" max="9" min="1" />

从子组件传值到父组件