vue组件之间的通信

    vue组件间的通信有父--->子、子--->父、非父子之间的通信    虽然我们稍微复杂的项目都用vuex来管理了，但是还是想写一篇关于有父--->子、子--->父、非父子    之间通信的文章。下面通过代码来讲述    父--->子组件间的通信    父级页面：    <template>            <div id="app">                    <Header :parentMsg='parentMsg' >                    </Header>            </div>    </template>    import Header from './components/header'    export default {        name: 'App',         data () {            return {                parentMsg: '你访问的是父级页面的数据',            }        },        components:{            Header,        }    }    子页面：    <template>            <div>                <div >{{parentMsg}}</div>            </div>    </template>        export default {            name: 'Header',            props:['parentMsg'],   //接收父级页面传过来的数据            data(){                return {                    parentMsg:''                    }                }        }    子--->父组件间的通信    父级页面：    <template>        <div id="app">            <Header :parentMsg='parentMsg'  @tanster='getuser'>            </Header>            <p>                父级页面接收子页面的数据:{{user}}            </p>        </div>    </template>    <script>        import Header from './components/header'        export default {            name: 'App',             data () {                return {                    parentMsg: '你访问的是父级页面的数据',                    user:''                }            },            components:{                Header,            },            methods:{                getuser(msg){                    this.user=msg //接收子页面传过来的数据                }            }        }    </script>    子页面：    <template>        <div>            <div >{{parentMsg}}</div>            <p>header页面{{msg}}</p>            <input v-model="msg" @change=getuser()>        </div>    </template>    <script>        export default {            name: 'Header',            props:['parentMsg'],            data(){                return {                    msg:''                }            },            methods:{                    getuser(){                        // 传给父组件                        this.$emit('tanster',this.msg) //传给父级页面                    },            }        }    </script>非父子组件页面间的通信，可以使用EventBus使用EventBus首先需要新建一个EventBus.js，代码如下：    import Vue from 'vue'    export default new Vue()    // import Vue from 'vue'    // const EventBus = new Vue()    // export {EventBus}    子页面1：    <template>        <div>            <input v-model="msg">            <button @click="send()">send</button>        </div>  </template>    <script>        import EventBus from '../assets/js/EventBus'        export default {            name: 'Header',            data(){                return {                    msg:''                }            },            methods:{                    send(){                        EventBus.$emit('sub-msg',this.msg);  //向页面2发送数据                    }            }        }    </script>    子页面2：    <template>            <div>                    <p>sub页面接收header页面传过来的数据:<span>{{msg}}</span></p>            </div>    </template>    <script>            import EventBus from '../assets/js/EventBus'            export default {                    name: 'Sub',                    data(){                            return {                                    msg:''                            }                    },                    mounted(){                            EventBus.$on('sub-msg',function(msg){                                    this.msg=msg; //接收页面1传过来的数据                            }.bind(this));                    }            }    </script>以上就是组件间同信的三种方式，还有一种通信就是vuex，vuex在本文就不写了，之前写过一篇对vuex的使用及理解。针对一些数据比较难管理的项目来说还是用vuex，方便数据的管理。