# 自定义组件

作用：提取页面公共结构，达成某结构复用，精简代码

1. 建立 components 文件夹

2. 在文件夹下建立自定义名称的文件夹，在其内建立 component 相应文件

3. 在要引入的页面的 json 配置中:

   "usingComponents": {
       // 自定义标签名： 自定义组件的路径（json文件中不能有此注释）
   	"component-tag-name": "path/to/the/custom/component"
   }
   

4. 在要引入的页面书写

   <component-tag-name></component-tag-name>
   

5. 如果想要在页面引入的组件内添加其它组件，可以使用 slot 插槽

   <!-- 组件模板 -->
   <view class="wrapper">
     <view>这里是组件的内部节点</view>
     <slot></slot>
   </view>
   

   <!-- 引用组件的页面模板 -->
   <view>
     <component-tag-name>
       <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
       <view>这里是插入到组件slot中的内容</view>
     </component-tag-name>
   </view>
   

   默认情况下，一个组件的 wxml 中只能有一个 slot。需要使用多 slot 时，可以在组件 js 中声明启用

   Component({
   	options: {
   		multipleSlots: true, // 在组件定义时的选项中启用多slot支持
   	},
   	properties: {
   		/* ... */
   	},
   	methods: {
   		/* ... */
   	},
   });
   

   <!-- 组件模板 -->
   <!-- 这个组件的wxml中使用多个slot，以不同的 name 来区分 -->
   <view class="wrapper">
     <slot name="before"></slot>
     <view>这里是组件的内部细节</view>
     <slot name="after"></slot>
   </view>
   

   <!-- 引用组件的页面模板 -->
   <!-- 使用时，用 slot 属性来将节点插入到不同的slot上 -->
   <view>
     <component-tag-name>
       <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
       <view slot="before">这里是插入到组件slot name="before"中的内容</view>
       <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
       <view slot="after">这里是插入到组件slot name="after"中的内容</view>
     </component-tag-name>
   </view>
   

6. 组件的事件传播

   <!-- 在自定义组件中 -->
   <button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
   

   Component({
   	properties: {},
   	methods: {
   		onTap: function() {
   			var myEventDetail = {}; // detail对象，提供参数
   			// 触发事件的选项
   			var myEventOption = {
   				bubbles: true / false, // 事件是否冒泡
   				composed: true / false, // 事件是否可以穿越组件边界，为false时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部
   				capturePhase: true / false, // 事件是否拥有捕获阶段
   			};
   			this.triggerEvent("myevent", myEventDetail, myEventOption);
   		},
   	},
   });
   

   <!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 -->
   <component-tag-name bindmyevent="onMyEvent" />
   <!-- 或者可以写成 -->
   <component-tag-name bind:myevent="onMyEvent" />
   

   Page({
   	onMyEvent: function(e) {
   		e.detail; // 自定义组件触发事件时提供的detail对象
   	},
   });
   

注意：

1. 组件对应 wxss 文件的样式，只对组件 wxml 内的节点生效。编写组件样式时，需要注意以下几点：

   • 组件内部不能使用 id 选择器、属性选择器、标签选择器

   • 全局样式和引用组件的页面的样式对组件无效，组件只能继承引用页面的 font、color 样式

   • 在引用组件的页面尽量避免使用后代选择器更改组件内的样式

   • 在组件的 js 文件 中声明:

     Component({
     	options: {
     		// styleIsolation 选项从基础库版本 2.6.5 开始支持。它支持以下取值：isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）
     		styleIsolation: "isolated",
     	},
     });