LOADING...

加载过慢请开启缓存(浏览器默认开启)

loading

微信小程序组件的定义与使用

2022/12/1 微信小程序

1.自定义组件

1.新建组件：在根目录下新建components文件夹，在该文件夹下新建组件文件夹，右键新建Component

2.组件的引入：全局引入在app.json中，新增 “usingComponents”: {},在其中引入组件名及对应的路径，如：

 "usingComponents": {
    "timeline":"/components/timeline/timeline"
  }

如果是局部引入，则在对应的页面json中添加如上代码

3.组件的使用：在页面中将组件名作为标签使用，如：

    <timeline/>

4.组件与页面的区别：

  • 组件的json文件中的component为true
 "component": true,
  • 组件的js文件中调用的是Component()函数，页面调用的是Page()函数
组件：
Component({})
页面：
Page({})
  • 组件的事件处理函数需要定义到methods节点中，页面则是放在data同层级下
组件：
data:{},
methods: {
    getlist(){}
}
页面：
data:{},
getlist(){}

2.组件样式隔离：

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的UI结构，小程序页面的样式也不会影响到组件的样式，防止样式之间的互相影响

  • app.wxss中的样式对组件无效
  • 只有class选择器会有样式隔离的效果，id选择器，属性选择器，标签选择器不受样式隔离的影响

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题，如果希望外界能够控制组件内部的样式，可以通过styleIsolation修改组件的样式隔离选项。

  • 在options中修改：

    Component({
    options:{
        styleIsolation:'isolated'
    }
})

  • 在组件的json文件中添加如下配置：

    {
    "styleIsolation":"isolated"
}

    styleIsolation的可选值：

    可选值 默认值 描述
    isolated 是 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
    apply-shared 否 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
    shared 否 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）

    3.组件通信

    1.properties

    小程序中，properties是组件的对外属性，用来接收外界传递到组件中的数据

    父组件js
data:{
     steplist: [{
      taskName: '申请人发起',
      passFlag: 1
    }, {
      taskName: '银行人员审批',
      passFlag: 1

    }, {
      taskName: '银行人员办结',
      passFlag: 1

    }]
}
父组件wxml
<timeline  steplist="{{steplist}}"/>


组件js中通过properties接收
Component({
    peoperties:{
        //接收方式1:完整定义属性方式，当需要指定默认值时可采用
        steplist:{
            type:Array，//属性类型
            value:null//属性默认值
        },
        //接收方式2：简化定义属性方式，不需要指定属性默认值时可采用
        steplist:Array
    }
})

    2.data和properties的区别

    在小程序中properties属性和data的用法相同，都是可读可写的：

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

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