美文网首页
自定义组件基础使用

自定义组件基础使用

作者: _白羊 | 来源:发表于2019-02-12 16:11 被阅读1次

自定义组件的作用:

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

创建自定义组件

1、一个自定义组件由json wxml wxss js4个文件组成,首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true ):

{
  "component": true
}

2 、在 wxml 文件中编写组件模板,在 wxss 文件中加入组件样式,它们的写法与页面的写法类似
代码示例:

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>
/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

注意:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器

3、在自定义组件的 js 文件中,需要使用 Component() 来注册组件,并提供组件的属性定义、内部数据和自定义方法。组件的属性值和内部数据将被用于组件 wxml 的渲染,其中,属性值是可由组件外部传入的。
代码示例:

Component({
  properties: {
    // 这里定义了innerText属性,属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod() {}
  }
})

使用自定义组件

在需要时组件的页面对应的 json 文件中引用声明

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

细节注意事项

一些需要注意的细节:

因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合,所以自定义组件的标签名也只能包含这些字符。
自定义组件也可以引用其他自定义组件的,引用方法类似于页面引用自定义组件的方式(使用 usingComponents 字段)。
自定义组件和页面所在项目根目录名不能以“wx-”为前缀,否则会报错。

注意,是否在页面文件中使用 usingComponents 会使得页面的 this 对象的原型稍有差异,包括:

  • 使用 usingComponents 页面的原型与不使用时不一致,即 Object.getPrototypeOf(this) 结果不同。
  • 使用 usingComponents 时会多一些方法,如 selectComponent 。
    出于性能考虑,使用 usingComponents 时, setData 内容不会被直接深复制,即 this.setData({ field: obj }) 后 this.data.field === obj 。(深复制会在这个值被组件间传递时发生。)
  • 如果页面比较复杂,新增或删除 usingComponents 定义段时建议重新测试一下。

相关文章

  • vue系列笔记(三)------vue组件

    一 、组件基础(组件就是自定义标签) 1 定义组件名称 (1) 当使用 kebab-case (...

  • React个人整理

    React基础 自定义新组件 props和propTypes 带状态的文本框组件 从外部访问组件(谨慎使用) 中途...

  • 自定义组件

    创建自定义组件 使用自定义组件

  • React组件的生命周期学习笔记

    创建新组件的API 使用自定义组件1(类似DOM组件) 使用自定义组件2(工厂方法) 注意:React.DOM.*...

  • 微信小程序-自定义组件

    一、自定义组件介绍 微信小程序提供了自定义组件扩展机制,允许我们使用自定义组件的方式来构建页面。 自定义组件可以使...

  • 自定义组件基础使用

    自定义组件的作用: 开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用 开发者将复杂的页面拆...

  • react自定义组件中使用ref

    一、自定义组件使用ref并且透传子组件ref 自定义组件中使用ref需要用到react的2个hooks:1.for...

  • 组件化开发

    一.组件化介绍 组件化模块划分 基础组件: 宏定义/自定义分类/自定义工具类功能组件: 项目中常用功能,如:定位/...

  • 小程序的自定义组件

    小程序允许我们使用自定义组件的方式来构建页面。 自定义组件 1. 创建自定义组件 类似于页面,一个自定义组件由 j...

  • 微信小程序开发入门:2.5 自定义组件,2.6 插件,2.7 分

    2.5 自定义组件 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。所有自定义组件相关特性都需要...

网友评论

      本文标题:自定义组件基础使用

      本文链接:https://www.haomeiwen.com/subject/klskeqtx.html