微信小程序学习笔记（ 自定义组件 ）

自定义组件

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

创建自定义组件

（自定义组件需要重新开一个文件夹，然后再在其他页面引用，可以理解成封装一个组件，一个组件放在一个文件夹里）类似于页面，一个自定义组件由 json wxml wxss js 四个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组件设为自定义组件）：

{
   
	"component": true
}

同时，还要 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，他们的写法与页面的写法类似。具体细节和注意事项参见 。

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

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

注意：在组件wxss中不应使用ID选择器，属性选择器和标签选择器。

在自定义组件的js文件中，需要使用 Component()来注册组件，并提供组件的属性定义，内部数据和自定义方法。
组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。更多细节参见 Component构造器。

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

使用自定义组件

使用已注册的自定义组件前，首先要在页面的json 文件中进行应用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

//需要应用的页面json文件
{
   
	"usingComponents":{
   
		"component-tag-name":"path/to/the/custom/component"
		//前面是组件名，后面是封装的文件的地址
	}
}

这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

<view>
<!-- 以下是对一个自定义组件的引用 -->
	<component-tag-name inner-text="Some text"></component-tag-name>
</view>

（微信开发者工具有一个代码示例片段）
自定义组件的 wxml 节点结构在与数据结合之后，将被插入到引用位置内。

细节注意事项

一些需要注意到细节：

• 因为 wxml 节点标签名只能是小写字母，中划线和下划线的组合，所以自定义组件的标签名也之只能包含这些字符。
• 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
• 自定义组件和页面所在项目根目录名不能以 “ wx- ” 为前缀，否则会报错。

注意，是否在页面文件中使用 usingComponents 会使得页面的 this 对象的原型稍有差异 ，
包括：

• 使用 usingComponents 页面的原型于不使用时不一致，即 Object.getPrototypeOf(this) 结果不同。
• 使用 usingComponent 时会多一些方法，如 selectComponent 。
• 出于性能考虑，使用 usingComponents 时，setData 内容不会被直接深复制，即 this.setData({field:obj}) 后 this.data.field === obj 。（深复制会在这个值被组件间传递时发生。）

如果页面比较复杂，新增或删除 usingComponents 定义段时建议重新测试一下。

组件模板和样式

类似于页面，自定义组件拥有自己的 wxml 模板和 wxss 样式。

组件模板

组件模板的写法与页面模板相同。组件模板于组件数据结合后生成的节点树，将被插入到组件的引用位置上。
在组件模板中可以提供一个 < slot > 节点，用于承载组件引用时提供的子节点，用于承载组件引用时提供的子节点。

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

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

注意，在模板中引用到的自定义组件及其对应的节点名需要在 json 文件中显式定义，否则会被当作一个无意义的节点，除此以外，节点名也可以被声明为抽象节点。

模板数据绑定

与普通的 wxml 模板类似，可以使用数据绑定，这样就可以向子组件的属性传递动态函数。

<!-- 应用组件的页面模板 -->
<view>
	<component-tag-name prop-a=“{
    {dataFieldA}}” porp-b=“{
    {dataFieldB}}”>
	<!-- 这部分内容将被放置在组件 <slot> 的位置上-->
		<view>这里是插入到组件slot中的内容</view>
	</component-tag-name>
</view>

在以上例子中，组件的属性 propA 和 propB 将收到页面传递的数据。页面可以通过 setData 来改变绑定的数据字段。
注意：这样的数据绑定只能传递 JSON 兼容数据。还可以在数据中包含函数（但这些函数不能在 WXML 中直接调用，只能传递给子组件）。

组件wxml的slot

在组件的 wxml 中可以包含 slot 节点，用于承载组件使用者提供的 wxml 结构。
默认情况下，一个组建的 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=“defore” 中的内容</view>
		<!--这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
		<view slot="after">这里是插入到组件slot name=“after” 中的内容</view>
	</component-tag-name>
</view>

组件样式

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

• 组件和引用组件的页面不能使用 id 选择器（#a），属性选择器（ [a] ）和标签名选择器，请改变class选择器。
• 组件和引用组件的页面中使用后代选择器（.a，.b）在一些极端情况下会有非预期的表现，
• 子选择选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
• 继承样式，如 font ，color，会从组件外继承到组件内。
• 出继承组件外，app,wxss 中的样式，组件所在页面的样式对自定义

#a {
   } /*在组件中不能使用*/
[a] {
   } /*在组件中不能使用*/
button {
   } /*在组件中不能使用*/
.a>.b {
   } /*除非 .a 是 view 组件节点，否则不一定会生效 */

除此以外，组件可以指定他所在节点的默认样式，使用 ：host 选择器

/* 组件 custom-component.wxss */
:host {
   
	color: yellow;
}

<csutom-component>这段文本是黄色的</csutom-component>

组件样式隔离

默认情况下，自定义组件的样式只受到自定义组件 wxss 影响。除非以下两种情况：

• app.wxss 或页面的 wxss 中使用了标签名选择器（或一些其他特殊选择器）来指定样式，这些选择器会影响到页面和全部组件。通常情况下这是不推荐的做法。
• 指定特殊的样式个理选项 styleIsolation 。

Component({
   
	option: