vue组件之间的通信

Posted 2021-02-16 zhanganyongxin

在vue的开发过程中组件的通信有一下几种方式

父传子：props

子传父：emit

vuex状态管理

bus总线机制 

var bus = new Vue()

Vue.component("xiongda",{
            data:function(){
                return {
                    xiongDaInput:""
                }
            },
            methods:{
                sendToXiongEr:function(){
                //给熊二发送消息
                //触发msgToXiongEr事件
                    bus.$emit("msgToXiongEr",this.xiongDaInput);
                    this.xiongDaInput = "";
                }
            },
            template:`
                <div>
                    <h1>我是熊大</h1>
                    <input type="text" v-model="xiongDaInput"/>
                    <button @click="sendToXiongEr">Click Me</button>
                </div>
            `
        })
//熊二组件    
        Vue.component("xionger",{
            data:function(){
                return{
                    recvMsgIs:[]
                }
            },
            template:`
                <div>
                    <h1>我是熊二</h1>
                    <p v-for="tmp in recvMsgIs">{{tmp}}</p>
                </div>
            `,
            mounted:function(){
//            给该组件绑定一个自定义事件和对应的处理函数    
                //调用bus中的on方法
                //事件的触发一般是接收数据然后处理
                var that = this;
                    bus.$on("msgToXiongEr",function(msg){
                        //alert("自定义的事件触发，接收到的数据"+msg);
                            that.recvMsgIs.push(msg);
                    })
            }
        })
        new Vue({
            el:"#container",
            data:{
                msg:"Hello VueJs"
            }
        })
    </script>
 </body>
</html>