$emit 和 $on用法

最新推荐文章于 2023-06-10 23:38:48 发布
最新推荐文章于 2023-06-10 23:38:48 发布
阅读量354 收藏
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaitong2204/article/details/104211037
版权 
<html>
  <head>
    <title>$emit 和 $on</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <button @click="boost">触发事件</button>
    </div>
    <script>
      new Vue({
        el: '#root',
        data() {
          return {
            message: 'hello vue'
          }
        },
        created() {
          // 一个事件可以绑定多个方法
          this.$on('my_events', this.handleEvents)
          //this.$on('my_events', this.handleEvents2)
        },
        methods: {
          handleEvents(e) {
            console.log(this.message, e)
          },
          boost() {
            this.$emit('my_events', 'my params')            
          }
        }
      })
    </script>
  </body>
</html>

 

翟敏1201
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2.0中 $emit() 和 $on() 的用法
Leon的博客
02-01 2966
简单粗暴直接上代码 html> head> meta charset="utf-8" /> title>Leontitle> script src="https://cdn.jsdelivr.net/npm/vue">script> head> body> div id="box"> com-a>com-a>
$emit和$on 的使用
hellow_d的博客
06-22 5822
一、$emit 1、this $emit（'自定义事件名',要传送的数据）； 2、触发当前实例上的事件，要传递的数据会传给监听器； 二、$on 1、VM.$on('事件名',callback) --------------------callback回调$emit要传送的数据； 2、监听当前实例上自定义时间； 三、接下来我们通过一个实例来解释 1、想要实现的 点击上一页、下一页，分别展现那页的内容。 数据刷新 废话不多说，上代码 以下是子组件 父组件代码 ...
vue $emit和$on
WenyueQ@
05-18 196
子组件： this.$emit('childevent',false);//触发一个在子组件中声明的事件childEvnet 父组件： <regist-companyv-on:childevent='wathChildEvent'></regist-company> method： wathChildEvent:function(vals){//直接监听又子组件触发的事件，参数为子组件的传来的数据 debugger...
vue中的$on与$emit
qq_42526440的博客
03-10 1159
们再项目中经常会遇到这么些情况，兄弟组件之间的传值。 比如说一个组件内的按钮触发了兄弟组件的<audio>标签，从而播放背景音乐。另一个组件触发了暂停，从而暂停背景音乐。 这个时候就会用到$on和$emit了。 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 $emit 1、this.$emit（‘自定义事件名’,要传送的数据）； 2、触发当前实例上的事件，要传递的数据会传给监听器； $on 1、VM.$on('事件名',callback) ---
$emit $on 的实现
程序员
12-10 1006
var eventList = { 'sayName': [sayName] } var name = 'hehe' var age = 28 function sayName() { console.log(this.name) } function s...
vuejs使用$emit和$on进行组件之间的传值的示例
11-26
这两个方法主要用于子组件向父组件传递信息，因为 Vue 默认不支持子组件向父组件直接传递值，而 `$emit` 和 `$on` 的组合恰好解决了这个问题。 在 Vue 中，`$emit` 是子组件用于触发自定义事件的方法，通常伴随着...
vue中$refs, $emit, $on, $once, $off的使用详解
10-16
在Vue.js框架中，$refs, $emit, $on, $once, 和 $off 是用于组件间通信的重要机制。下面将分别对它们进行详细的解释和示例说明。 1. **$refs** `$refs` 是 Vue 提供的一种机制，允许父组件引用其子组件实例。在...
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
01-21
组件之间事件触发 之前使用组件，并不是很频繁，是水平的问题，目前工作中，公司大佬带着我...$emit的使用方法如下： 在子组件中，写一个click点击事件。比如： cancelCU() { this.dialogVisible = false; this.$emi
Vue $emit()不能触发父组件方法的原因及解决
10-15
在Vue.js中，组件间的通信是通过事件和监听器来实现的，其中 `$emit` 是子组件用来触发自定义事件的关键方法。当遇到 `$emit` 无法触发父组件方法的情况，开发者可能会感到困惑。本文将深入探讨这个问题的原因以及...
Angular中$broadcast和$emit的使用方法详解
08-30
Angular中$broadcast和$emit的使用方法详解 Angular是一个流行的前端框架，它提供了许多强大的功能来帮助开发者快速构建应用程序。在Angular中，有两个重要的方法：$broadcast和$emit，它们都是用于在控制器之间...
Vue this.$emit和this.$on
小葵坤_易安的博客
08-06 1万+
1、解决第一次监听不到数据的方法 this.$nextTick() this.$nextTick(function () { this.$bus.$emit("yulan", row); }) setTimeout setTimeout(() => { //row 代表要传递的参数数据 this.$bus.$emit("yulan", row); }, 100); 2、子组件传值给父组件 子组件中使用$emit触发事件的值传出去，父组件通过事件监听，获
Vue.js 中的 $emit 和 $on 方法有什么区别？
Java徐师兄的博客
06-10 1744
emit 和on方法是Vuejs中用于实现组件间通信的两个重要方法。on 方法是 Vue.js 中用于实现组件间通信的两个重要方法。on方法是Vuejs中用于实现组件间通信的两个重要方法。emit 方法用于触发自定义事件并向父组件或祖先组件派发该事件，而on方法用于监听自定义事件并在事件触发时执行回调函数。on 方法用于监听自定义事件并在事件触发时执行回调函数。on方法用于监听自定义事件并在事件触发时执行回调函数。emit 方法必须在组件内部使用，而on。
VUE平行组件之间的传值--$emit和$on的使用
范范范国超的博客
01-15 520
需求：有三个组件A，B，C，需要把组件A和组件B中的数据传到C，并且组件ABC是平行关系。 实现的思路是：创建一个空的vue实例，把A和B的数据通过$emit获取，然后C组件通过$on接收。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l...
Vue.js 进阶技巧Day02 $on 与 $emit （局部通信、父组件通知所有子组件、全局监听和通讯）
坚持硬核
10-20 895
目录 0x00 局部通信： 0x01 如果父组件下有多个子组件，且数量未知，如何方便通知所有子组件呢? 0x03 全局的监听和通讯： 0x00 局部通信： 只能在当前组件下使用 <template> <div class='container p-5'> <button class='btn btn-success' @click='test'> 点击通讯 </button> <demo-item></dem
Vue.js源码——事件机制
weixin_34409357的博客
09-26 214
写在前面 因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。文章的原地址：github.com/answershuto…。在学习过程中，为Vue加上了中文的注释github.com/answershuto…，希望可以对其他想学习Vue源码的小伙伴有所帮助。可能会有理解存在偏差的地方，欢迎提issue指出，共同学习，...
vue中$emit与$on
极客神殿
12-08 1569
var Event = new Vue(); 相当于又new了一个vue实例，Event中含有vue的全部方法； Event.$emit('msg',this.msg); 发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数是这个数据现在的位置； Event.$on('msg',function(msg){　　 //接收数据，第一个参数是数据的名字，与发送时的名字对应，第二个...
Vue $on、$emit的实现
meng_xiaoxiao的博客
06-03 963
1、$on的用法：接收2个参数，返回对象的本身； 第一个参数是字符串或者字符串数组。 第二参数是回调函数。 2、$emit的用法：接收1+n个参数，返回对象的本身； 第一个参数是字符串； 第n参数是作为回调函数的参数。...
vue中 用事件对象$event 添加属性_解读Vue3中废弃组件事件的$on，$off 和 $once 实例方法...
weixin_29745227的博客
01-31 3226
本文要讲解的内容原文档地址点我传送Vue3.0中事件API$on，$off 和 $once 实例方法已被移除，应用实例不再实现事件触发接口。接下来我们分析下为什么要在Vue3中去掉，如果需要继续使用此功能改为使用第三方 mitt 库替代。2.x语法在 2.x 中，Vue 实例可用于触发通过事件触发 API 强制附加的处理程序 ($on，$off 和 $once)，这用于创建 event hub，以...
vue2.0 #$emit,$on的使用
热门推荐
m0_37068028的博客
06-07 2万+
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用，改用$emit,$on
$emit和$on用法
最新发布
11-25
$emit和$on是Vue.js中用于组件间通信的两个方法。$emit用于触发当前实例上的自定义事件，并将要传递的数据传给监听器；$on用于监听当前实例上的自定义事件，并在事件触发时执行回调函数，回调函数中可以获取到$emit传递的数据。 下面是一个使用$emit和$on的示例： 1.在父组件中定义一个事件，并在子组件中触发该事件并传递数据： ```javascript // 父组件 <template> <div> <button @click="handleClick">点击触发事件</button> </div> </template> <script> import Vue from 'vue' export default { methods: { handleClick() { // 触发自定义事件，并传递数据 this.$emit('my-event', 'hello world') } } } </script> // 子组件 <template> <div> <button @click="handleClick">点击触发事件</button> </div> </template> <script> export default { methods: { handleClick() { // 触发父组件中定义的自定义事件，并传递数据 this.$emit('my-event', 'hello world') } } } </script> ``` 2.在另一个子组件中监听该事件，并在事件触发时执行回调函数： ```javascript // 子组件 <template> <div> <p>{{ message }}</p> </div> </template> <script> import Vue from 'vue' export default { data() { return { message: '' } }, mounted() { // 监听父组件中定义的自定义事件，并在事件触发时执行回调函数 this.$on('my-event', (data) => { this.message = data }) } } </script> ``` 在上面的示例中，父组件和子组件之间通过$emit和$on方法实现了数据的传递和监听。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值