微信小程序开发- 自定义组件、插槽、websocket(三)

1、小程序组件化编程从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。2、创建自定义组件自定义组件的构成:一个自定义组件由 .json 、.wxml 、.wxss和 .js 四个文件组成。编写组件需要做哪些工作?在编写自定义组件前,需要在 json文件中进行声明( component:true 就可以将
摘要由CSDN通过智能技术生成

1、小程序组件化编程
从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。

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

2、创建自定义组件
自定义组件的构成:
一个自定义组件由 .json.wxml.wxss.js 四个文件组成。

编写组件需要做哪些工作?
在编写自定义组件前,需要在 json文件中进行声明( component:true 就可以将这一组文件设为自定义组件)。
还要在 .wxml 文件中编写组件模板,在 .wxss 文件中加入组件样式

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

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

<!-- 自定义组件模板 -->
<view class="test">
  <view>组件内部节点</view>
  <slot></slot>
</view>

<!-- 引用组件的页面模板 -->
<view>
  <component-mytemplate>
    <view>这是插入到组件slot中的内容</view>
  </component-mytemplate>
</view>
/* 这个样式只适用于自定义组件 */
.test{
   
  background-color: antiquewhite;
}

注意:

  • 在模板中引用到的自定义组件及其对应的节点名需要在 json 文件中显式定义,否则会被当作一个无意义的节点。除此以外,节点名也可以被声明为抽象节点。
  • 在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
  • 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合,所以自定义组件的标签名也只能包含这些字符。
  • 自定义组件也是可以引用自定义组件的,引用方法类似于页面引用自定义组件的方式(使用 usingComponents 字段)。
  • 自定义组件和页面所在项目根目录名不能以“wx-”为前缀,否则会报错。

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

插槽作用:

  • 为了让我们封装的组件更具有扩展性
  • 让使用者可以决定组价内部的一些内容到底展示什么

注意:定义具名插槽时,在引用时也必须有名字

components/my-componets/index.js

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值