vue2中使用自定义事件实现组件间的通信

先导语

在vue2中vue实例就可以让我们去自定义事件，不需要我们去手动实现event-bus.下面，我们就可以来学习一下。

代码

还是之前的demo，但这次增加的需求是：在添加内容的时候，打印出“增加了哦”

父组件代码不变：

<template>
  <Input @addFn="addFn"/>
  <List :listData="listData" @deleteFn="deleteFn"/>
</template>

<script>
import Input from "./Input.vue";
import List from "./List.vue";
export default {
  components:{
    Input,List
  },
  data() {
    return {
      listData:['测试1','测试2'],
    }
  },
  methods:{
    addFn(value){
      this.listData.push(value)
    },
    deleteFn(index){
      this.listData.splice(index,1)
    }
  }
}
</script>

<template>
  <ul>
    <li v-for="(item,index) in listData" :key="'id'+index">
      {{item}}
      <button @click="deleteFn(index)">删除</button>
    </li>
  </ul>
</template>

<script>
import event from './event.js'
export default {
  props:{
    listData:{
      type:Array,
      default:[]
    }
  },
  mounted() {
    `event.$on('addedFn',this.addedFn)` //添加自定义事件
  },
  data() {
    return {
    }
  },
  methods:{
    deleteFn(index){
      this.$emit('deleteFn',index)
    },
   
    //定义自定义事件的内容
    addedFn(){
      console.log("增加了哦");
    }
    
  },
  //在实例销毁前，解绑自定义事件，避免造成内存泄漏
  beforeDestroy() {
    Event.$off('addedFn')
  }
}
</script>
<style>
  ul li{
    list-style: none;
  }
</style>

Input组件，当add被点击时，触发自定义事件

<template>
  <input type="text" v-model="msg">
  <button @click="add">add</button>
</template>

<script>
import Event from './event.js'
export default {
  data() {
    return {
      msg:''
    }
  },
  methods:{
    add(){
      this.$emit('addFn',this.msg)
      Event.$emit('addedFn') //触发自定义事件
    }
  }
}
</script>

event.js中只需要定义一个vue实例并导出即可：

import Vue from 'vue'
export  default  new Vue()

结束语

在Vue3中已经移除了$on,$off,$emit的API,所以在Vue3中要实现自定义事件可以借助第三方插件，例如:vue-happy-bus。那么，下次见。好好学习，天天向上！