亲宝软件园·资讯

展开

vue $emit和$on使用

小铁匠95 人气:0

$emit和$on的使用及说明

1. vm.$on(event,callback)

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

个人理解:监听接收传来的值

vm.$on('test',function(msg){
  console.log(msg)
})

示例:

2. vm.$emit(eventName,[…args])

用法:触发当前实例上的事件。附加参数都会传给监听器回调。

个人理解: 注册一个自定义事件

// 只配合一个事件名使用emit
// 子组件
Vue.component('welcome-button',{
  template: `
    <button @click="$emit('welcome')">点击按钮</button>
  `
})
// 父组件
<div>
  <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>  
...
...
...
methods: {
  sayHi() {
    alert('Hi!')  
  }
}

3.示例

有时候项目里面会遇到子组件与子组件通信。比如以下情况:

页面里引入了header组件和content组件,点击content组件的按钮,想要改变header组件的内容。

<template>
  <div class="home">
    <v-header></v-header>
    <v-content></v-content>
  </div>
</template>
<script>

image.png

(1)首先,在main.js里面全局注册一个eventbus的方法

import Vue from 'vue';
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
Vue.prototype.$EventBus = new Vue();
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

(2)然后在content组件注册一个自定义事件:

<template>
  <div class="content">
    <img alt="Vue logo" src="../assets/logo.png">
    <button @click="changeEvent">I am content!</button>
  </div>
</template>
<script>
export default {
  name: 'Content',
  methods: {
    changeEvent() {
      // 注册一个自定义事件
      this.$EventBus.$emit("changeNum",123)
    }
  }
}
</script>
<style scoped>
button{
  width: 200px;
  height: 50px;
  display: block;
  margin: 0 auto;
  border: none;
  color: #fff;
  font-size: 20px;
  border-radius: 6px;
  background: #007ef3;
}
</style>

(3)在header组件监听接收这个值:

<template>
  <div class="header">
    <h1>{{headStr}}</h1>
  </div>
</template>
<script>
export default {
  name: 'Header',
  data(){
    return{
      headStr:"This is my head!"
    }
  },
  created() {
    // 监听接收这个值
    this.$EventBus.$on("changeNum", (val) => {
      this.headStr = val;
    });
   
  }
}
</script>
<style scoped>
</style>

点击按钮,header变化如下:

image.png

这样就可以完成子组件与子组件之间的传值了,当然也可以用Vuex进行子组件之间传值。

$emit和$on(在同一个组件中的用法 )

百度之后,终于明白$emit 和 $on 的基础用法。不多说 ,直接上课。

假设有一个按纽,希望在点击按纽之后触发某一个方法。那么我们可以这样。

<button @click='emit'>只触发一个方法</button>
created () {
      this.$on('wash_Goods',(arg)=> {
          console.log(arg)//这儿的arg能接收到 下面的参数
      })
  },
  methods : {
      emit () {
         this.$emit('wash_Goods',['fish',true,{name:'vue',verison:'2.4'}])
      }
  }

我们可以这样子去理解,首先,点击按纽,它就会走emit的方法。 在该方法中。遇到emit,那么它就会找它需要监听到washGoods的事件,找啊找。

然后,它在created的生命周期中找到了。原来,在created生命周期中有一个叫this.on(‘wash_Goods’)的监听事件。同时,该事件会有一个对应的执行方法。那么,它就会顺着走下去,直接执行 刚在 this.$on(‘wash_Goods’)的监听方法。

this.$on('wash_Goods',(arg)=> {
    console.log(1)
    console.log(arg)//这儿的arg能接收到 下面的参数
})
this.$on('wash_Goods',(arg)=> {
    console.log(2)
    console.log(arg)//这儿的arg能接收到 下面的参数
})
this.$on('wash_Goods',(arg)=> {
    console.log(3)
    console.log(arg)//这儿的arg能接收到 下面的参数
})
//那么,这个按纽在点击之后就会触发这三个方法。 

或许,有同学会问了,刚我提到,在监听事件晨在,监听的事件可以是数组。没错,是数组,即

<button @click='emit'>只触发一个方法</button>
created () {
    this.$on('wash_Goods',(arg)=> {
        console.log('执行1')
        console.log(arg)
    })
    this.$on(['wash_Goods','abcdef'],(arg)=> {
        console.log('执行2') //这个也会被执行
        console.log(arg)
    })
},
methods : {
    emit () {
        this.$emit('wash_Goods',['fish',true,{name:'vue',verison:'2.4'}])
    }
}

这儿的数组也可以这样子理解,当触发按纽的时候,它去寻找需要监听事件时,不管找到的是字符串还是数组,只要监听的事件名字中有相对应的名字,它都会执行。【打个生活中的小例子,哪儿都有你。】 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

加载全部内容

相关教程
猜你喜欢
用户评论