# 组件模板和样式

类似于页面,自定义组件拥有自己的 ksml 模板和 css 样式。

# 组件模板

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

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

# 代码示例

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

注意,在模板中引用到的自定义组件及其对应的节点名需要在 json 文件中显式定义,否则会被当作一个无意义的节点(表现类似于 web 的 HTMLUnknownElement

# 模板数据绑定

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

# 代码示例

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

在以上例子中,组件的属性propA 和 propB将收到页面传递的数据。页面可以通过 setData 来改变绑定的数据字段。

# 组件 ksml 的 slot

在组件的 ksml 中可以包含 slot节点,用于承载组件使用者提供的 ksml 结构。

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

需要使用多 slot 时,可以在这个组件的 ksml 中使用多个 slot,以不同的 name 来区分。

<!-- 引用组件的页面模板 -->
<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>

# 组件样式

组件对应的json 配置中定义了 component:true 后,对应组件样式只会作用在当前组件中(原理同 Vue的组件作用域内的CSS (opens new window));否则样式会作为普通css 作用到全局范围。

外部样式如果���要控制是否作用在组件上,可以按照css选择器优先级规则进行控制。例如下面的样式:

/* page.css */
.box{
    background: green;
}

.container .component-a .box{
    background: blue;
}

/* component.css */
/* 等同于.box[scoped-id] */
.box{ 
    background: red;
}

在开启component:true 后优先级如下:

blue > red > green

编写组件样式时,需要注意以下几点:

  • 组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用。
  • 子元素选择器(.a>.b)只能用于 view 组件与其子节点之间,用于其他组件可能导致非预期的情况。
  • 继承样式,如 fontcolor,会从组件外继承到组件内。

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

# 代码示例

/* 组件 custom-component.css */
:host {
  color: yellow;
}
<!-- 页面的 ksml -->
<custom-component>这段文本是黄色的</custom-component>
Copyright ©2024, All Rights Reserved