赞
踩
组件模板的写法与页面模板相同。
与页面中的 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 节点可以用于承载组件使用者提供的 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 文件的样式,只会对组件 wxml 内的节点生效,对于引用该组件的页面不会生效。
组件内不要使用 id 选择器、属性选择器和标签选择器,会对引用它的外部页面造成影响。推荐使用 class 选择器。
- 组件使用 id 选择器和属性选择器,页面生效而组件不生效。
- 组件使用标签选择器,页面和组件都会生效。
默认情况下,页面 wxss 文件的样式,只会对页面 wxml 内的节点生效,不会对页面内引用的组件生效。
页面内不要使用 id 选择器、属性选择器和标签选择器,会对引用的自定义组件造成影响。推荐使用 class 选择器。
- 页面使用 id 选择器和属性选择器,页面生效而组件不生效。
- 页面使用标签选择器,页面和组件都会生效。
默认情况下,页面和组件的 wxss 互不影响。可以在页面或自定义组件的 json 文件中配置 styleIsolation 来进行组件样式隔离。
styleIsolation 选项的属性值有:
apply-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>
在 json 文件中必须使用 "component": true
进行自定义组件声明,将这一组文件设置为自定义组件。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。