Vue中獨立組件之間數據交互

獨立組件之間數據交互：通過自定義事件

組件A中的【數據】，傳遞給組件B

1.創建組件A，組件B
2.組件B在實例創建完成時就開始監聽事件【等待接收數據】:鈎子
3.組件A中觸發事件，發送數據

注意：接收數據的函數，一定要綁定在生命周期創建鈎子上（created:function(){}）
1、引入相應的文件

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

 

2、Dom文件

<div id="app">
    <comp-a></comp-a>
    <comp-b></comp-b>
</div>

 

3、js的相關內容

<script>
    Vue.component("compA", {
        template:"<button @click='test'>組件A中，觸發事件</button>",
        methods:{
            test:function() {
                bus.$emit("myevent", this.username);//$emit("事件名稱",[參數列表])通過$emit在代碼中觸發一個事件
            }
        },
        data:function() {
            return {
                username:"jerry"
            }
        }
    });
    Vue.component("compB", {
        template:"<h2>{{ds}}</h2>",
        created:function() {/*這是實例創建完成時自動調用的生命周期鈎子*/
            var that = this;
            bus.$on("myevent", function(msg) {//通過$on("事件名稱",function(參數列表){})來監聽一個事件是否進行處理
                // 接收到數據之后，就可以更新組件中使用的數據，然后展示到頁面上
                console.log("接收到其他組件傳遞的數據：" + msg);
                that.ds = msg;
            });
        },
        data:function() {
            return {
                ds:"hello"
            }
        }
    });

    /*定義一個消息分發中間件*/
    var bus = new Vue();

    var vm = new Vue({
        el:"#app"
    });
</script>