codecamp

组件模版和样式

类似于页面,自定义组件拥有自己的 ttml/wxml 模版和 ttss/wxss 样式。


组件模版

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

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

<!-- 自定义组件模板 -->
<view class="component-wrapper">
  <view>组件内部节点</view>
  <slot></slot>
</view>
<!-- 引用自定义组件的页面模版 -->
<view>
  <my-component>
    <view>组件 slot 内容</view>
  </my-component>
</view>

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


模版数据绑定

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

<!-- 引用自定义组件的页面模版 -->
<view>
  <my-component data-a="{{ data1 }}" data-b="{{ data2 }}">
    <view>组件 slot 内容</view>
  </my-component>
</view>

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


组件的 slot

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

默认情况下,一个组件的 ttml/wxml 中只能有一个 slot。需要使用多 slot 时,应使用不同的 name 来区分。

<!-- 自定义组件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>Content gose here</view>
  <slot name="after"></slot>
</view>

使用时,用 slot 属性来将节点插入到不同的 slot 上。

<!-- 引用自定义组件的页面模版 -->
<view>
  <my-component>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>

    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </my-component>
</view>


组件样式

组件对应 ttss/wxss 文件的样式,只对组件 ttml/wxml 内的节点生效。编写组件样式时,需要注意以下几点:

  • 继承样式,如 font 、color ,会从组件外继承到组件内。
  • 除继承样式外,app.ttss/wxss 中的样式、组件所在页面的的样式对自定义组件无效。

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

/* 组件 my-component 的样式表 */
:host {
  color: red;
}

在 ttml 中:

<my-component>这段文本为红色的</my-component>

外部样式类

此功能正在支持中


自定义组件
Component 构造器
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

字节跳动小程序 介绍

字节跳动小程序 开发

字节跳动小程序开发框架

字节跳动小程序开发框架基础说明

字节跳动小程序开发框架基础功能

字节跳动小程序开发框架逻辑层

无标题文章

无标题目录

API

无标题文章

无标题文章

无标题文章

无标题文章

无标题文章

无标题目录

无标题目录

无标题文章

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }