《十》微信小程序中自定义组件的组件模板、组件样式和 JSON 配置

本文链接：https://blog.csdn.net/wsln_123456/article/details/104629437

组件 WXML 模板：

组件模板的写法与页面模板相同。

数据绑定：

与页面中的 WXML 类似，可以使用数据绑定。

<!-- custom-component.wxml -->
<view>
	{{transferVal}}
	{{personalVal}}
</view>

// custom-component.js
Component({
  properties: {
    transferVal: {
    	type: String,
    	value: '我是引用自定义组件的页面传递过来的数据'
    }
  },
  data: {
  	personalVal: '我是自定义组件的内部数据'
  },
})

<!--index.wxml-->
<custom-component transfer-val="{{pageVal}}" />

slot 插槽：

组件的 slot 节点可以用于承载组件使用者提供的 WXML 结构。

默认情况下，一个组件的 WXML 中只能有一个 slot 。

<!-- 自定义组件 sort-tabs.wxml -->
<view>
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>

<!-- 引用自定义组件的页面 index.wxml -->
<view>
  <sort-tabs>
    <!-- 这部分内容将被放置在 sort-tabs 组件 <slot> 的位置上 -->
    <view>这里是插入到自定义组件 slot 位置的内容</view>
  </sort-tabs>
</view>

需要使用多 slot 时，可以在组件 js 中声明启用；然后就可以在这个组件的 wxml 中使用多个 slot 了，以不同的 name 来区分；在使用自定义组件时，用 slot 属性来将节点插入到不同的 slot 上。

// 自定义组件 sort-tabs.js
Component({
  options: {
    multipleSlots: true // 在 options 选项中启用多 slot 支持
  }
})

<!-- 自定义组件 sort-tabs.wxml -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>
</view>

<!-- 引用自定义组件的页面 index.wxml -->
<view>
  <sort-tabs>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件 slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件 slot name="after"中的内容</view>
  </sort-tabs>
</view>

组件 WXSS 样式：

组件内部样式对外部样式的影响：

默认情况下，组件 wxss 文件的样式，只会对组件 wxml 内的节点生效，对于引用该组件的页面不会生效。

组件内不要使用 id 选择器、属性选择器和标签选择器，会对引用它的外部页面造成影响。推荐使用 class 选择器。

组件使用 id 选择器和属性选择器，页面生效而组件不生效。
组件使用标签选择器，页面和组件都会生效。

外部样式对组件内部样式的影响：

默认情况下，页面 wxss 文件的样式，只会对页面 wxml 内的节点生效，不会对页面内引用的组件生效。

页面内不要使用 id 选择器、属性选择器和标签选择器，会对引用的自定义组件造成影响。推荐使用 class 选择器。

页面使用 id 选择器和属性选择器，页面生效而组件不生效。
页面使用标签选择器，页面和组件都会生效。

组件样式隔离：

默认情况下，页面和组件的 wxss 互不影响。可以在页面或自定义组件的 json 文件中配置 styleIsolation 来进行组件样式隔离。

styleIsolation 选项的属性值有：

isolated：默认值。表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响。
apply-shared：表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面。
shared：表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。

如果 Component 构造器用于构造页面，则默认值为 shared，且还有以下几个额外的样式隔离选项可用：

page-isolated：表示在这个页面禁用 app.wxss ，同时页面的 wxss 不会影响到其他自定义组件。
page-apply-shared：表示在这个页面禁用 app.wxss ，同时页面 wxss 样式不会影响到其他自定义组件，但设为 shared 的自定义组件会影响到页面。
page-shared：表示在这个页面禁用 app.wxss ，同时，页面 wxss 样式会影响到其他设为 apply-shared 或 shared 的自定义组件，也会受到设为 shared 的自定义组件的影响。

// json
{
	"styleIsolation": "isolated"
}
	
// js
Component({
	options: {
	    styleIsolation: 'isolated'
	}
})

外部样式类：

可以在 Component 中用 externalClasses 中定义若干个外部样式类，在组件中接收外部传入的样式类。

在同一个节点上使用普通样式类和外部样式类时，两个类的优先级是未定义的，要避免这种情况。

<!-- 引用自定义组件的页面 index.wxml -->
<custom-component external-class="text-color"></custom-component>
/* 引用自定义组件的页面 index.wxss */
.text-clolr {
	color: red;
}

<!-- 自定义组件 custom-component.wxml -->
<view class="external-class">这段文本的颜色由组件外的 class 决定</view>
/* 自定义组件 custom-component.js */
Component({
  externalClasses: ['external-class']
})

自定义组件局部使用页面或父组件的样式：

即使启用了样式隔离 isolated ，组件仍然可以在局部引用组件所在页面的样式或父组件样式。

组件局部引用组件所在页面的样式。

<!-- 引用自定义组件的页面 index.wxml -->
<custom-component></custom-component>
/* 引用自定义组件的页面 index.wxss */
.text-clolr {
	color: red;
}

<!-- 自定义组件 custom-component.wxml -->
<view class="~text-clolr">这段文本的颜色局部引用了组件所在页面的样式</view>

组件局部引用组件所在父组件的样式：可以连续使用多个 ^ 来引用祖先组件中的样式。

<!-- 父组件 parent-component.wxml -->
<child-component></child-component>
/* 引用自定义组件的页面 parent-component.wxss */
.text-clolr {
	color: red;
}

<!-- 子组件 child-component.wxml -->
<view class="^text-clolr">这段文本的颜色局部引用了组件所在父组件的样式</view>

虚拟化组件节点使其本身无法设置样式：

默认情况下，自定义组件本身的那个节点就是一个普通的节点，可以在这个节点上设置样式。

<!-- 页面的 WXML -->
<view style="display: flex">
  <!-- 默认情况下，这是一个普通的节点 -->
  <custom-component style="color: blue; flex: 1">蓝色、满宽的</custom-component>
</view>

但有些时候，自定义组件并不希望这个节点本身可以设置样式，这种情况下，可以将这个自定义组件设置为“虚拟的”。

Component({
  options: {
    virtualHost: true
  },
})

<!-- 页面的 WXML -->
<view style="display: flex">
  <!-- 如果设置了 virtualHost ，节点上的样式将失效 -->
  <custom-component style="color: blue">不是蓝色的</custom-component>
</view>