700字范文 > 微信小程序自定义组件的基本使用

微信小程序自定义组件的基本使用

时间：2019-09-18 15:59:15

相关推荐

微信小程序自定义组件的基本使用

组件与模块类似，实现了功能的复用，提高开发速率，减少代码量

在开发过程中，总会遇到一些功能板块是相同或很类似的。如两个不同页面都有搜索框，或者导航栏等。

那么这个使用就很有必要使用组件了

组件文件创建

一般在根目录下创建一个 components 文件夹，用于保存各组件

组件模板

<view><view>组件内部</view><view>

组件使用

定义组件

在使用组件前，需要在使用组件的页面的 json 文件中进行定义。

// index.json"usingComponents": {"myCom":"../../components/com-1/com-1"// 组件名路径(一般相对路径)}

也可以在 app.json 文件中进行去全局定义。那么就无需在页面的 json文件配置了

配置的方法相同

在页面使用

<view><myCom></myCom></view>

插槽

插槽相当于是组件留出的一个位置，可以让页面向其提供其他页面结果。

插槽使用 slot 标签放在组件内，页面在使用组件时，在组件标签内传递标签等代码

<view><view>我是组件内的标签</view><slot></slot> </view>

将代码写入插槽

<view><myCom><view>我是页面传入的内容</view> </myCom></view>

这里相当于把<view>我是页面插入的内容<view>这段代码代替了组件的 slot 标签部分。然后再在使用的组件那显示出来

注意

与 vue 不同，默认情况下，一个组件只能使用一个 slot.

如果要使用多个 slot , 需要在组件的 js 文件中，增加以下代码（与 data 同级）

options: {multipleSlots: true // 在组件定义时的选项中启用多slot支持},

具名插槽

当使用多个插槽时，开启方法如上。为了让代码插入正确的插槽。可以使用具名插槽

即插槽增加一个 name 属性。父组件通过 slot 属性。进行配对。

否则。所有代码可能只会传到第一个 slot 中。

<slot name="s1"></slot> <slot name="s2"></slot> 

<myCom><view slot ="s2">我是页面传入的内容1</view><view slot = 's1'>我是页面传入的内容2</view></myCom>

结果是内容2 在内容 1 上面。

组价样式

组件的样式有些需要特别注意的地方

#a {} /* 在组件中不能使用 */[a] {} /* 在组件中不能使用 */button {} /* 在组件中不能使用 */.a > .b {} /* 除非 .a 是 view 组件节点，否则不一定会生效 */

组件样式受到影响

默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响

也有特殊情况页面样式会影响到子组件

样式继承，如 font .colorapp.wxss

styleIsolation

配置组件的样式情况的一个配置

{"stylelsolation":"值"}

对于值，有以下这些情况

此外，小程序基础库版本 2.2.3 以上支持addGlobalClass选项，即在Component的options中设置addGlobalClass: true。这个选项等价于设置styleIsolation: apply-shared，但设置了styleIsolation选项后这个选项会失效。

外部样式类

有时，组件希望接受外部传入的样式类。此时可以在Component中用externalClasses定义段定义若干个外部样式类。

// 组件 js 文件Component({externalClasses: ['out-class']})// 组件 <view class = "out-class">这里的类名由外部决定，样式也由外部决定</view>

<myCom out-class = "class1"></myCom><myCom out-class = "class2"></myCom><myCom out-class = "class3 class4"></myCom>

样式引用

即使开启了样式隔离。也组件也可以引用父组件或页面上的样式

<view class="~page-class"> 引用页面的类名为 page-class 的样式 </view><view class="^father-com"> 引用父节点类名为 father-com 的样式 </view>

也可以连续使用多个^来引用祖先组件中的样式

父向子传数据

传递

页面向子组件传递参数的方式是通过属性传递。

<myCom name="名字" age="{{age}}"></myCom> 

接收

子组件接收页面传递的参数是通过 js 文件中的 properties 对象接收，接收到的数据相可以直接使用。

// 组件的 js 代码是在 conponent 函数内的Component({properties: {name:{type:String,value:"小红"},age:{type:Number,value:321}},}）

properties 参数对象里面的参数也是以对象的形式进行定义

其中 name 接收父组件传递的 name 参数， type 限制参数数据类型， value 设置默认值。

<view>{{name}} 和 {{age}}</view>

子向父传递参数

子向父传递数据通过事件。子组件可以在满足一下函数或事件时，触父页面定义的事件，同时可以向事件传递参数。

1. 页面设置接收事件

bind+自定义事件名 = "事件处理函数名"

<myCom bindmyEvent = "getData"><myCom><myCom bind:myEvent = "getData"><myCom>

2. 组件触发自定义事件

自定义组件触发事件时，需要使用triggerEvent方法，指定事件名、detail对象和事件选项

<button bindtap="onTap">点击这个按钮将触发“myEvent”事件</button>

// 当 tap 时，就可以触发自定义事件，并且想向父页面出传递参数Component({methods:{// 组件定义方法的对象，组件所有方自定义方法都放在这里onTap(){var data = {...} // 需要给父组件传递的 detail 参数var eventOption = {...} // 事件选项this.triggerEvent('myEvent' , data , eventOption) // 自定义事件名，detail 参数，事件选项}}})

事件选项包括

3. 页面接收参数

Page({getData(e){e.detail // 自定义组件触发事件时提供的detail对象}})

组件生命周期

组件有3个比较重要的声明周期：

组件实例刚刚被创建好时，created生命周期被触发。此时，组件数据this.data就是在Component构造器中定义的数据data。此时还不能调用setData。通常情况下，这个生命周期只应该用于给组件this添加一些自定义属性字段。在组件完全初始化完毕、进入页面节点树后，attached生命周期被触发。此时，this.data已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。在组件离开页面节点树后，detached生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则detached会被触发。

定义生命周期方法

Component({lifetimes: {attached() {// 在组件实例进入页面节点树时执行},detached() {// 在组件实例被从页面节点树移除时执行},},// 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容attached() {// 在组件实例进入页面节点树时执行},detached() {// 在组件实例被从页面节点树移除时执行},// ...})