uni.$emit和$emit的区别
时间: 2023-11-28 21:45:08 浏览: 50
uni.$emit和this.$emit的作用是相同的,都是用于触发自定义事件。它们的区别在于使用场景不同。uni.$emit是在非Vue组件中使用的,而this.$emit是在Vue组件中使用的。在Vue组件中,可以使用this.$emit来触发自定义事件,并且可以在父组件中使用v-on来监听这个事件。而在非Vue组件中,可以使用uni.$emit来触发自定义事件,并且可以在其他非Vue组件中使用uni.$on来监听这个事件。
举个例子,假设我们有两个页面A和B,现在需要在A页面中触发一个自定义事件,并将数据传递给B页面。可以在A页面中使用uni.$emit来触发这个事件,并在B页面中使用uni.$on来监听这个事件并获取数据。
以下是一个示例代码:
在A页面中触发自定义事件并传递数据:
```javascript
uni.$emit('add', {listData: [1, 2, 3]});
```
在B页面中监听自定义事件并获取数据:
```javascript
uni.$on('add', function(res) {
console.log(res.listData); // 输出:[1, 2, 3]
});
```
相关问题
this.$emit和uni.$emit
this.$emit和uni.$emit都是用于在Vue组件中触发自定义事件的方法。它们的用法类似,都需要传递两个参数:事件名称和要传递的数据。具体区别在于this.$emit是Vue实例的方法,而uni.$emit是uni-app框架的方法。
下面是一个使用this.$emit触发自定义事件的例子:
```javascript
// 子组件中触发自定义事件
this.$emit('my-event', 'hello world')
// 父组件中监听自定义事件
<template>
<child-component @my-event="handleEvent"></child-component>
</template>
<script>
export default {
methods: {
handleEvent(data) {
console.log(data) // 输出:hello world
}
}
}
</script>
```
下面是一个使用uni.$emit触发自定义事件的例子:
```javascript
// 子组件中触发自定义事件
uni.$emit('my-event', 'hello world')
// 父组件中监听自定义事件
<template>
<child-component></child-component>
</template>
<script>
export default {
mounted() {
uni.$on('my-event', data => {
console.log(data) // 输出:hello world
})
}
}
</script>
```
uni.$emit 和 uni.$on
uni.$emit 和 uni.$on 是uni-app框架中用于组件间通信的两个方法。其中,uni.$emit 用于触发一个自定义事件,并传递参数;而 uni.$on 则用于监听一个自定义事件,并在事件触发时执行相应的回调函数。
举个例子,如果我们在组件 A 中触发一个名为 "myEvent" 的自定义事件,并传递一个参数 "hello",则可以这样写:
```
// 组件 A 中
uni.$emit('myEvent', 'hello');
```
而在组件 B 中监听这个事件,并在事件触发时执行相应的回调函数,则可以这样写:
```
// 组件 B 中
uni.$on('myEvent', (data) => {
console.log(data); // 输出 "hello"
});
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)