未验证 提交 a51139dc 编写于 作者: hbcui1984's avatar hbcui1984 提交者: GitHub

Update communication.md

上级 d520839c
> 自 HBuilderX 2.0.0 起自定义组件编译模式支持,[使用指南](https://ask.dcloud.net.cn/article/36010) > 自 HBuilderX 2.0.0 起自定义组件编译模式支持,[使用指南](https://ask.dcloud.net.cn/article/36010)
### uni.$emit(eventName,OBJECT) ### uni.$emit(eventName,OBJECT)
触发全局的自定事件。附加参数都会传给监听器回调 触发全局的自定义事件,附加参数都会传给监听器回调函数
|属性 |类型 |描述 | |属性 |类型 |描述 |
|--- |--- |--- | |--- |--- |--- |
|eventName |String |事件名 | |eventName |String |事件名 |
|OBJECT |Object |触发事件携带的附加参数 | |OBJECT |Object |触发事件携带的附加参数 |
**代码示例** **代码示例**
```javascript ```javascript
uni.$emit('update',{msg:'页面更新'}) uni.$emit('update',{msg:'页面更新'})
``` ```
### uni.$on(eventName,callback) ### uni.$on(eventName,callback)
监听全局的自定义事件。事件可以由 uni.$emit 触发,回调函数会接收所有传入事件触发函数的额外参数。 监听全局的自定义事件,事件由 `uni.$emit` 触发,回调函数会接收事件触发函数的传入参数。
|属性 |类型 |描述 | |属性 |类型 |描述 |
|--- |--- |--- | |--- |--- |--- |
|eventName |String |事件名 | |eventName |String |事件名 |
|callback |Function |事件的回调函数 | |callback |Function |事件的回调函数 |
**代码示例**
```javascript
uni.$on('update',function(data){
console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
})
```
### uni.$once(eventName,callback) **代码示例**
```javascript
监听全局的自定义事件。事件可以由 uni.$emit 触发,但是只触发一次,在第一次触发之后移除监听器。 uni.$on('update',function(data){
console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
})
```
### uni.$once(eventName,callback)
监听全局的自定义事件,事件由 `uni.$emit` 触发,但仅触发一次,在第一次触发之后移除该监听器。
|属性 |类型 |描述 | |属性 |类型 |描述 |
|--- |--- |--- | |--- |--- |--- |
|eventName |String |事件名 | |eventName |String |事件名 |
|callback |Function |事件的回调函数 | |callback |Function |事件的回调函数 |
**代码示例** **代码示例**
```javascript ```javascript
uni.$once('update',function(data){ uni.$once('update',function(data){
console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg); console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
}) })
``` ```
### uni.$off([eventName, callback]) ### uni.$off([eventName, callback])
移除全局自定义事件监听器。 移除全局自定义事件监听器。
|属性 |类型 |描述 | |属性 |类型 |描述 |
|--- |--- |--- | |--- |--- |--- |
|eventName |Array<String> |事件名 | |eventName |Array<String> |事件名 |
|callback |Function |事件的回调函数 | |callback |Function |事件的回调函数 |
**Tips** **Tips**
- 如果没有提供参数,则移除所有的事件监听器; - 如果uni.$off没有传入参数,则移除App级别的所有事件监听器;
- 如果只提供了事件,则移除该事件所有的监听器; - 如果只提供了事件名(eventName),则移除该事件名对应的所有监听器;
- 如果同时提供了事件与回调,则只移除这个回调的监听器; - 如果同时提供了事件与回调,则只移除这个事件回调的监听器;
- 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器; - 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器;
**代码示例** **代码示例**
`$emit``$on``$off`常用于跨页面、跨组件通讯,这里为了方便演示放在同一个页面 `$emit``$on``$off`常用于跨页面、跨组件通讯,这里为了方便演示放在同一个页面
```html ```html
<template> <template>
<view class="content"> <view class="content">
<view class="data"> <view class="data">
<text>{{val}}</text> <text>{{val}}</text>
</view> </view>
<button type="primary" @click="comunicationOff">结束监听</button> <button type="primary" @click="comunicationOff">结束监听</button>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
val: 0 val: 0
} }
}, },
onLoad() { onLoad() {
setInterval(()=>{ setInterval(()=>{
uni.$emit('add', { uni.$emit('add', {
data: 2 data: 2
}) })
},1000) },1000)
uni.$on('add', this.add) uni.$on('add', this.add)
}, },
methods: { methods: {
comunicationOff() { comunicationOff() {
uni.$off('add', this.add) uni.$off('add', this.add)
}, },
add(e) { add(e) {
this.val += e.data this.val += e.data
} }
} }
} }
</script> </script>
<style> <style>
.content { .content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.data { .data {
text-align: center; text-align: center;
line-height: 40px; line-height: 40px;
margin-top: 40px; margin-top: 40px;
} }
button { button {
width: 200px; width: 200px;
margin: 20px 0; margin: 20px 0;
} }
</style> </style>
``` ```
**注意事项** **注意事项**
- uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等 - uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等
- 使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni.$on 注册监听,onUnload 里边 uni.$off 移除,或者一次性的事件,直接使用 uni.$once 监听 - 使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni.$on 注册监听,onUnload 里边 uni.$off 移除,或者一次性的事件,直接使用 uni.$once 监听
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册