【Web前端基础知识】微信小程序之自定义组件创建及使用

发布 : Web前端培训      来源:

2021-08-30 16:50:55

一、自定义组件简述

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

二、如何创建自定义组件

1、创建一个放自定义组件集合的文件夹,

2、创建自定义组件的文件夹

3、鼠标右键自定义组件文件夹新建Component

三、如何引用

1、在页面组件的配置文件中注册,配置文件为.json的文件

***图中“my-btn”为组件的名字随便写,后面跟的组件的路径***

  1. {
  2. "usingComponents": {
  3. "my-btn": "../../components/mybtn/mybtn"
  4. }
  5. }

2、在页面.wxml文件中使用即可

四、组件的样式设置

组件的样式很简单,类比页面,在.wxml中写组件页面结构,在.wxss中写样式

注意!!!:类名选择器必须使用class

wxml文件:

wxss文件:

  1. .btn{ background: red; }

五、 组件的数据和方法

自定义组件中.js文件,data字段是存放数组的,methods是写方法的,可类比vue学习,在data中写入数据可在wxml中渲染

1、如何渲染数据

.js文件:

  1. data: {
  2. title: "我是按钮"
  3. },

.wxml文件 :

2、如何绑定数据

.wxml文件:

.js文件:

  1. methods: {
  2. btnClick() {
  3. console.log( "btnClick" );
  4. }
  5. }

六、组件的对外开放属性 -- properties

组件的对外属性,用来接收外界传递到组件中的数据,组件的 properties 和 data 的用法类似,它们都是可读可写的,只不过:

-- data 更倾向于存储组件的私有数据

-- properties 更倾向于存储外界传递到组件中的数据

properties属性不需要在自定义组件内部进行修改,是通过组件调用时传递进来的!!!

语法结构 :

  1. 属性名称: {
  2. type:String,NUmber,【null不限制数据类型】
  3. value: ""
  4. }

组件内定义:

  1. properties: {
  2. color: {
  3. type: String,
  4. value: "red"//默认颜色
  5. }
  6. }

组件页面中使用:

使用自定义组件传入对外开放属性:

  1. "pink">
  2. //此时button按钮就会变成粉色

THE END  

声明:本站稿件版权均属中公教育优就业所有,未经许可不得擅自转载。

领取零基础自学IT资源

涉及方向有Java、Web前端、UI设计、软件测试、python等科目,内容包含学习路线、视频、源码等

点击申请领取资料

点击查看资料详情 

收起 


 相关推荐

问题解答专区
返回顶部