11 | 小程序之自定义组件

前言

为什么要自定义组件 ？
在项目开发中，如果我们写的界面有很多组件块是重复的，这样会造成代码冗余，而且开发得很累，所以，我们要善于根据不同的场景自定义组件来构建页面
参考文档

1、创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成
可以在微信开发者⼯具中快速创建组件的⽂件结构

在⽂件夹内 components/myHeader，创建组件名为 myHeader

1.1 声明组件

⾸先需要在组件的 json json ⽂件中进⾏⾃定义组件声明
myHeader.json

{  
    "component": true 
}

1.2 编辑组件

同时，还要在组件的 wxml ⽂件中编写组件模板，在 wxss ⽂件中加⼊组件样式
slot 表⽰插槽，类似vue中的slot
myHeader.wxml

<!-- 这是自定义组件的内部WXML结构 --> 
<view class="inner">  
    {{innerText}}    
    <slot></slot> 
</view>

在组件的 wxss ⽂件中编写样式
注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
myHeader.wxss

/* 这里的样式只应用于这个自定义组件 */ 
.inner {  color: red; }

2.声明自定义组件

⾸先要在⻚⾯的 json ⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径
**index.wxml **

{    // 引用声明  
    "usingComponents": {    
        // 要使用的组件的名称     
        // 组件的路径    
        "my-header":"/components/myHeader/myHeader"  
      }
}

3.注册组件

在组件的 js ⽂件中，需要使⽤ Component() 来注册组件，并提供组件的属性定义、内部数据和⾃定义⽅法
myHeader.js

Component({  
    properties: {    
    // 这里定义了innerText属性，属性值可以在组件使用时指定    
    innerText: {      
        // 期望要的数据是 string类型      
        type: String,
        value: 'default value',   
        } 
    },  
    data: {   
    // 这里是一些组件内部数据    
    someData: {}  
    },  
    methods: {   
        // 这里是一个自定义方法    
        customMethod: function(){
        }  
   } 
})

4.页面中使用自定义组件

<view>  
    <!-- 以下是对一个自定义组件的引用 -->  
    <my-header inner-text="Some text">    
        <view>用来替代slot的</view>    
    </my-header> 
</view>

5.定义段与示例方法

Component 构造器可⽤于定义组件，调⽤ Component 构造器时可以指定组件的属性、数据、⽅法 等。参考文档

6. 组件-自定义组件传参

1. ⽗组件通过属性的⽅式给⼦组件传递参数
2. ⼦组件通过事件的⽅式向⽗组件传递参数

6.1 过程

看下一章的小实验（12 | 自定义组件小实验），里面讲解这两个传参的方式很清楚

7.小结

1. 标签名是中划线的⽅式
2. 属性的⽅式也是要中划线的⽅式
3. 其他情况可以使⽤驼峰命名
   1 组件的⽂件名如 myHeader.js 的等
   2 组件内的要接收的属性名如 innerText