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

vue2的用自定义事件实现兄弟组件通信

在App.vue组件里面引入List 和Input两个组件

<template>
  <div id="app">
    <Input />
    <List />
  </div>
</template>

<script>
import List from './components/List.vue'
import Input from './components/Input.vue'
export default {
  name: 'App',
  components: {
    List,
    Input
  },
  data() {
    return {
      
    }
  },
  methods: {}
}
</script>

创建vue实例 event.js文件

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

List.vue组件代码如下所示

<template>
  <div>
    <ul>
      <li v-for="item in arr" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
import event from '@/common/event'
export default {
  name: 'List',
  data() {
    return {
      arr: []
    }
  },
  methods: {
    addTitleHander(msg) {
      this.arr.push(msg)
    }
  },
  mounted() {
    //绑定自定义事件 在这里自定义事件
    event.$on('onAddTitle', this.addTitleHander)
  },
  beforeDestroy() {
    //及时销毁 否则可能会造成内存泄漏
    event.$off('onAddTitle', this.addTitleHander)
  }
}
</script>

Input.vue组件代码如下

<template>
  <div><input type="text" v-model="title" /><button @click="sendMsg">添加列表项</button></div>
</template>
<script>
import event from '@/common/event'
export default {
  name: 'Input',
  data() {
    return {
      title: ''
    }
  },
  methods: {
    sendMsg() {
      //调用兄弟组件的自定义事件并把值发送过去
      event.$emit('onAddTitle', this.title)
      this.title = ''
    }
  }
}
</script>