vue的$on,$emit

218 篇文章 18 订阅

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

Api 中的解释:

vm.$emit( event, […args] )

参数:

{string} event
[…args]
触发当前实例上的事件。附加参数都会传给监听器回调。

vm.$on( event, callback )

参数:

{string | Array} event (数组只在 2.2.0+ 中支持) {Function} callback

用法:

监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。

复制代码

<template>
  <div>
      <p @click='emit'>{{msg}}</p>
  </div>
</template>

<script>
export default {
  name: 'demo',
  data () {
      return {
         msg : '点击后派发事件'
      }
  },
  created () {
      this.$on('wash_Goods',(arg)=> {
          console.log(arg)
      })
  },
  methods : {
      emit () {
         this.$emit('wash_Goods',['fish',true,{name:'vue',verison:'2.4'}])
      }
  }
}
</script>

复制代码

复制代码

<template>
  <div>
      <p @click='emit'>{{msg}}</p>
      <p @click='emitOther'>{{msg2}}</p>
  </div>
</template>

<script>
export default {
  name: 'demo',
  data () {
      return {
         msg : '点击后派发事件',
         msg2 : '点击后派发事件2',
      }
  },
  created () {

      this.$on(['wash_Goods','drive_Car'],(arg)=> {
          console.log('真多事')
      })
      this.$on('wash_Goods',(arg)=> {
          console.log(arg)
      })
      this.$on('drive_Car',(...arg)=> {
          console.log(BMW,Ferrari)
      })
  },
  methods : {
      emit () {
         this.$emit('wash_Goods','fish')
      },
      emitOther () {
         this.$emit('drive_Car',['BMW','Ferrari'])
      }
  }
}
</script>

复制代码

 子组件到父组件通讯

复制代码

<hello @pfn="parentFn"></hello>

<script>
  Vue.component('hello', {
    template: '<button @click="fn">按钮</button>',
    methods: {
      // 子组件:通过$emit调用
      fn() {
        this.$emit('pfn', '这是子组件传递给父组件的数据')
      }
    }
  })
  new Vue({
    methods: {
      // 父组件:提供方法
      parentFn(data) {
        console.log('父组件:', data)
      }
    }
  })
</script>

复制代码

非父子组件通讯

复制代码

var bus = new Vue()

// 在组件 B 绑定自定义事件
bus.$on('id-selected', function (id) {
  // ...
})
// 触发组件 A 中的事件
bus.$emit('id-selected', 1

转自https://www.cnblogs.com/yanqiong/p/11249417.html

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中,$emit和$on是用于实现组件间通信的两个方法。 $emit方法用于在当前实例上触发自定义事件。它可以接收一个事件名称作为第一个参数,以及可选的附加参数。例如,通过调用`this.$emit('test', 'Hello')`来触发名为"test"的自定义事件,并传递字符串"Hello"作为参数。 $on方法用于监听当前实例上的自定义事件。它接收两个参数,第一个参数是事件名称,第二个参数是一个回调函数。当触发该事件时,回调函数会被执行,并接收所有传入事件触发函数的额外参数。例如,通过调用`this.$on('test', function(msg){ console.log(msg) })`来监听名为"test"的自定义事件,并在事件触发时打印出传递的参数。 在给定的代码示例中,`this.$EventBus`是一个在Vue原型上注册的全局事件总线对象。通过将事件总线对象分配给`Vue.prototype.$EventBus`,我们可以在不同的组件中访问和使用它。其中,`new Vue()`创建了一个Vue实例并将事件总线对象赋值给`$EventBus`。然后,我们可以在组件中使用`this.$EventBus.$emit()`触发自定义事件,以及使用`this.$EventBus.$on()`监听自定义事件。 在header组件中,通过在created生命周期钩子函数中使用`this.$EventBus.$on()`方法监听名为"changeNum"的自定义事件。当"changeNum"事件被触发时,回调函数会执行,并将传递的参数赋值给headStr属性,从而更新组件中的显示内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值