微信小程序开发- 自定义组件、插槽、websocket（三）

1、小程序组件化编程
从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。

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

2、创建自定义组件
自定义组件的构成：
一个自定义组件由 .json 、.wxml 、.wxss和 .js 四个文件组成。

编写组件需要做哪些工作？
在编写自定义组件前，需要在 json文件中进行声明（ component:true 就可以将这一组文件设为自定义组件）。
还要在 .wxml 文件中编写组件模板，在 .wxss 文件中加入组件样式。

2-2-1 组件模板
组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。

在组件模板中可以提供一个 节点，用于承载组件引用时提供的子节点。

<!-- 自定义组件模板 -->
<view class="test">
  <view>组件内部节点</view>
  <slot></slot>
</view>

<!-- 引用组件的页面模板 -->
<view>
  <component-mytemplate>
    <view>这是插入到组件slot中的内容</view>
  </component-mytemplate>
</view>

/* 这个样式只适用于自定义组件 */
.test{
   
   
  background-color: antiquewhite;
}

注意：

• 在模板中引用到的自定义组件及其对应的节点名需要在 json 文件中显式定义，否则会被当作一个无意义的节点。除此以外，节点名也可以被声明为抽象节点。
• 在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
• 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
• 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
• 自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。

插槽
在组件模板中可以提供一个 <slot>节点，用于承载组件引用时提供的子节点。

插槽作用：

• 为了让我们封装的组件更具有扩展性
• 让使用者可以决定组价内部的一些内容到底展示什么

注意：定义具名插槽时，在引用时也必须有名字

components/my-componets/index.js

  // 组件属性列表