vue同辈组件之间通信

1、新建event.js

import Vue from "vue"

export default new Vue()

2、使用event.$emit，举例子

<template>
  <div>
    <input v-model="title" type="text">
    <button @click="add">增加</button>
  </div>
</template>

<script>
import event from './event'
export default {
    data(){
        return{
            title:''
        }
    },
    methods:{
        add(){
            //自定义组件，同辈之间传信
            event.$emit('addTitle',this.title)
            this.title=''
        }
    }
}
</script>

<style>

</style>

3、监听数据event.$on，举例子

<template>
  <div>
    <ul v-for="(item,index) in list" :key='index'>
        <li>{{item.id}}{{item.city}}</li>
    </ul>
  </div>
</template>

<script>
import event from './event'
export default {
    props:{
        list:{
            type:Array,
            default(){
                return []
            }
        }
    },
    mounted(){
        event.$on('addTitle',this.addTitleHandler)
    },
    methods:{
        addTitleHandler(val){
            console.log('addTitleHandler',val);
        }
    }，
    beforeDestroy(){
        //及时销毁，否则可能造成内存泄露
        event.$off('addTitle',this.addTitleHandler)
    }

}
</script>

<style>

</style>