【Web前端基础知识】微信小程序之自定义组件创建及使用

一、自定义组件简述

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

二、如何创建自定义组件

1、创建一个放自定义组件集合的文件夹，

2、创建自定义组件的文件夹

3、鼠标右键自定义组件文件夹新建Component

三、如何引用

1、在页面组件的配置文件中注册，配置文件为.json的文件

***图中“my-btn”为组件的名字随便写，后面跟的组件的路径***

1. {   
2.   "usingComponents": {   
3.     "my-btn": "../../components/mybtn/mybtn"   
4.   }   
5. }   

2、在页面.wxml文件中使用即可

四、组件的样式设置

组件的样式很简单，类比页面，在.wxml中写组件页面结构，在.wxss中写样式

注意!!!：类名选择器必须使用class

wxml文件：

1. class="btn"> 我是mybtn组件   

wxss文件：

1.  .btn{     background: red;    }   

五、 组件的数据和方法

自定义组件中.js文件，data字段是存放数组的，methods是写方法的，可类比vue学习，在data中写入数据可在wxml中渲染

1、如何渲染数据

.js文件：

1. data: {     
2.     title: "我是按钮"  
3.  },  

.wxml文件 ：

1. class="btn"> {{title}}    

2、如何绑定数据

.wxml文件：

1. class="btn" bindtap="btnClick"> {{title}}    

.js文件：

1. methods: {   
2.  
3.   btnClick() {   
4.  
5.     console.log( "btnClick" );   
6.  
7.   }   
8.  
9. }   

六、组件的对外开放属性 -- properties

组件的对外属性，用来接收外界传递到组件中的数据,组件的 properties 和 data 的用法类似，它们都是可读可写的，只不过：

-- data 更倾向于存储组件的私有数据

-- properties 更倾向于存储外界传递到组件中的数据

properties属性不需要在自定义组件内部进行修改，是通过组件调用时传递进来的!!!

语法结构 ：

1. 属性名称: {   
2.     type：String，NUmber，【null不限制数据类型】   
3.     value: ""   
4. }   

组件内定义：

1. properties: {   
2.     color: {   
3.       type: String,   
4.       value: "red"//默认颜色   
5.    }   
6. }  

组件页面中使用：

1. "btnClick" style= "background: {{ color }}">{{title}}    

使用自定义组件传入对外开放属性：

1. "pink">   
2. //此时button按钮就会变成粉色