vue组件间的通信案例

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_37064409/article/details/79717886

组件间通信方式汇总

父子组件间的通信方式

• 父向子组件的通信方式

// 在父组件中定义props数据，并绑定在子组件上
<template>
    <div id="parent">
        <input type="text" v-modal="parentMsg"/>
        <Child v-bind:parentMsg="parentMsg"></Child> 
    </div>
<template>

<script>
import Child form "./component/Child";
export default {
    name:"Parent",
    data(){
        return {
            parentMsg:"this message from parent",  
        }
    }
}
</script>

// 子组件通过props接收父组件传递数据
<template>
    <div id="child">
        {{parentMsg}}   //展示接收数据
    </div>
</template>

<script>
export default {
    name:"Child",
    props:{
        parentMsg :{
            type: String,   // prop 指定验证规则。 
            require : true,
            default : ""
        }
    },
    data(){
        return {

        }
    }
}
</script>

• 子向父组件的通信方式

    //子组件通过$emit传递数据
    <template>
    <div id="child">
        <button @click="childEvent">Btn</button>   //自定义childEvent事件 触发时传递数据
    </div>
</template>

<script>
export default {
    name:"Child",
    data(){
        return {
            childMsg:"this message from Child",
        }
    }
    methods:{
        childEvent:function(){
            this.$emit("sendChildEvent",this.childMsg);   //触发当前实例上的事件<sendChildEvent>。附加参数都会传给监听器回调。
        }
    }
}
</script>

//父组件通过vm.$emit( event, […args] )//监听自定义事件event，获取子组件传递数据

<template>
    <div id="Parent">
        <Child @sendChildEvent="parentEvent"></Child>  //触发自组件自定义事件
    </div>
</template>

<script>
    export default {
        name : "Parent",
        data(){
            return {
                parentMsg : "default msg",  
            }
        },
        methods:{
            parentEvent:function(data){  
                this.parentMsg = data;   //子组件数据通过回调传递给this.parentMsg
            }
        }
    }
</script>

//当子组件中$emit(“sendChildEvent”,data) 通过Click事件触发
//父组件监听自定义事件sendChildEvent ， 获取数据

兄弟组件间的通信方式

各组件为了保证各自的独自性，不允许直接传递数据，
如果小项目建议直接使用Bus方式，如果是大型项目最好用vuex方式处理 state

- Bus.js方式
一个简单的案例：两个按钮分别为不同组件。

• 主要思路：
  Bus.$emit(event,data) 触发自定义事件
  Bus.$on(event,function(data){}) 监听自定义事件，并通过回调获取传递数据

//首先新建Bus.js 文件

    import Vue from "vue"
    export default new Vue

//分别在兄弟组件中引用Bus.js 文件

    // module 1
    <template>
        <div id="Module1">
                <button @click="incrementHandler">{{count}}</button>
        </div>
    </template>

    <script>
        import Bus from "./Bus.js"
        export default {
            name:"BtnModule1",
            data(){
                return {
                    count:5,
                }
            },
            methods : {
                incrementHandler: function () {
                    if (this.count < 10) {
                        this.count++;
                    }
                    Bus.$emit("increment1", this.count);   // Bus.$emit触发 自定义事件
                }
            },
            created(){     
                    Bus.$on("increment2", function (data) {   //监听组件btn2事件
                    $that.count1.count = 10 - data;
                });
            }，
            beforeCreate() {
                $that.count1 = this       //创建全局变量，接收this --》 ①
            }
        }
    </script>

    //Btn2 以同样的方式创建

这里仅讨论兄弟组件间的数据传递，对全局变量的引用可以忽略。
① 全局this的写法可以参考这里
2。 Vue声明周期可以参考https://blog.csdn.net/weixin_37064409/article/details/78881045“>这里

• vuex方式