vue組件兄弟間通信


四、兄弟組件間通信(event)

借助於一個公共的Vue的實例對象,不同的組件可以通過該對象完成事件的綁定和觸發

var bus = new Vue();

bus.$emit()
bus.$on()

熊大想要發消息給熊二,

接收方(熊二):事件綁定
bus.$on('customEvent',function(msg){
//msg就是通過事件 傳遞來的數據
})
發送方(熊大):觸發事件
bus.$emit('customEvent',123);


練習:
在熊二中 加上一個button,
點擊按鈕時告訴熊大:'快跑!'

接收方:事件綁定
發送方:觸發事件

 

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
    <script src="js/vue.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
        <xiongda></xiongda>
        <hr>
        <xionger></xionger>
    </div>
    <script>
/*借助於一個公共的Vue的實例對象,不同的組件可以通過該對象完成事件的綁定和觸發*/
//new一個對象,兄弟間的通信,將借助他事件綁定和觸發來實現
    var bus = new Vue();
    //熊大發送消息給熊二
        //xiongda組件
        Vue.component("xiongda",{
            methods:{
                sendToXiongEr:function(){
                //給熊二發送消息
                //觸發msgToXiongEr事件
                    bus.$emit("msgToXiongEr","哈哈,光頭強來了");
                }
            },
            template:`
                <div>
                    <h1>我是熊大</h1>
                    <button @click="sendToXiongEr">Click Me</button>
                </div>
            `
        })
//熊二組件    
        Vue.component("xionger",{
            template:`
                <div>
                    <h1>我是熊二</h1>
                </div>
            `,
            mounted:function(){
//            給該組件綁定一個自定義事件和對應的處理函數    
                //調用bus中的on方法
                //事件的觸發一般是接收數據然后處理
                var that = this;
                    bus.$on("msgToXiongEr",function(msg){
                        alert("自定義的事件觸發,接收到的數據"+msg);
                    })
            }
        })
        new Vue({
            el:"#container",
            data:{
                msg:"Hello VueJs"
            }
        })
    </script>
 </body>
</html>

改版:熊大在input輸入數據傳遞給熊二

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
    <script src="js/vue.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
        <xiongda></xiongda>
        <hr>
        <xionger></xionger>
    </div>
    <script>
/*借助於一個公共的Vue的實例對象,不同的組件可以通過該對象完成事件的綁定和觸發*/
//new一個對象,兄弟間的通信,將借助他事件綁定和觸發來實現
    var bus = new Vue();
    //熊大發送消息給熊二
        //xiongda組件
        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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM