Vue 组件通信方式

包括父->子,子->父,以及无关系组件等三种

父组件-->子组件通过props属性通信

子组件-->父组件通过监听事件$emit的方式通信

其他组件通信通过中央事件总线(事件车)的方式通信

如果无关系组件是兄弟关系,也可以用父组件作为中转,其中一个子组件通过$emit传给父组件,

父组件再通过v-bind传递给另外一个子组件

//父组件
<template>
    <div>
        <son :title="data" @cry="events"></son>
        <son-1></son-1>
    </div>
</template>

<script>
import Son from './Son.vue'
import Son1 from './Son1.vue';
export default {
    components: { Son, Son1 },
    data () {
        return {
            data: '这是父组件传递的数据'
        }
    },
    methods: {
        events (params, params1) {
            console.log(params, params1);
        },
    },
}
</script>

<style lang="scss" scoped>
</style>


//子组件1
    <template>
        <div>
            <button @click="emitEvent">{{title}}</button>
            <p>接收大兄弟的传值第{{aa}}次,接收的内容是:{{bb}}</p>
        </div>
    </template>

    <script>
    import Bus from './Bus' //引入中央事件总线/事件车
    export default {
        // props:["title"],
        props: {
            title: {
                type: String,
                default: 'dkdkdkd'
            },
        },
        data () {
            return {
                aa: ' ', //接收兄弟组件的传值
                bb: ' ', //接收兄弟组件的传值
            }
        },
        // 向父组件传值
        methods: {
            emitEvent () {
                this.$emit('cry', '这是子组件传递的数据',{ data: '这是对象' })
            },
        },

        // 接收兄弟组件传值
        created () {
            Bus.$on('cry',(params1,params2)=>{
                this.aa=params1
                this.bb=params2
            });
        },
    
    }
    </script>

    <style lang="scss" scoped>
    </style>  


//子组件2
<template>
    <div>
        <button @click="send">点我向其他组件传递内容</button>
    </div>
</template>

<script>
    import Bus from './Bus'; //引入中央事件总线/事件车
    export default {
        data() {
            return {
                a: 1,
            }
        },
        methods: {
            send() {
                Bus.$emit('cry',this.a++,'这是兄弟我给你传递的值')
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>


//中央事件总线(事件车)
import Vue from "vue";
export default new Vue;

 文件顺序