0
点赞
收藏
分享

微信扫一扫

小程序自定义组件

hwwjian 2022-04-21 阅读 78
javascript

一、组件定义
类似于页面,一个自定义组件是由四个文件组成的。

.wxml、.json、.js、.wxcc

首先需要在组件的json中进行自定义组件声明。

{
  "component": true
}
二、使用组件
要求对应 json 文件中包含 usingComponents 定义段

{
  "usingComponents": {
       "son":"/components/son/son"
}
}
三、设置插槽、命名插槽<slot>
// 使用的时候// 父组件
<son> <view slot="名字"> </view> </son>
// 子组件中
<slot name="名字"></slot>
四、组件中的样式
组件对应 wxss 文件的样式,只对组件wxml内的节点生效。编写组件样式时,需要注意以下几点:

组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器,请改用class选择器。

组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用。

子元素选择器(.a>.b)只能用于 view 组件与其子节点之间,用于其他组件可能导致非预期的情况。

继承样式,如 font 、 color ,会从组件外继承到组件内。

除继承样式外, app.wxss 中的样式、组件所在页面的的样式对自定义组件无效(除非更改组件样式隔离选项)。

五、父子组件传值
1、父组件给子组件传值
 在子组件中定义属性,父组件在引用子组件的时候通过设置属性的方式给子组件传值

properties: {    
// 复杂定义    
name:{      
type: String,      
value:'张三丰'    
},    
// 简单定义    
name2:String
2、子组件给父组件传值
在父页面中使用的子组件标签上绑定一个自定义事件

<test-button name="张无忌" bind自定义事件="事件名"></test-button>
在子组件中触发这个事件,可以给父组件传值。

子组件中通过triggerEvent触发事件

methods: {    
方法名字: function(){
 
// 触发事件的选项      
this.triggerEvent('自定义事件类型', 子组件要传给父组件的值)    
 
}  }
父组件中拿到传过来的值使用自定义事件就欧克。参数就是子组件传来的参数。

六、组件的生命周期
重要的生命周期是 created 、attached、 detached

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

举报

相关推荐

0 条评论