<div id="app">
	<!-- 1.通過 v-bind 將數(shù)據(jù)傳給子組件 -->
    <test v-bind:ss='name'></test>
</div>

<script>
    var a = new Vue({
        el:'#app',
        data:{
            name:'bing',
        },
        components: {
            test:{
                props: ['ss'],   // 2.接收父組件傳遞過來的數(shù)據(jù)
                template:"<p>{{ss}}</p>"
            }
        }
    })
</script>

<div id="app">
    <p>{{ total }}</p>
    <button-counter v-on:increment="incrementTotal"></button-counter> <!-- 步驟3 -->
</div>

<script>
    Vue.component('button-counter', {
        template: '<button v-on:click="increment">{{ counter }}</button>', // 步驟1
        data: function () {
            return {
                counter: '子組件的數(shù)據(jù)'
            } 
        },
        methods: {
            increment: function () {
                this.$emit('increment', this.counter); // 步驟2
            }
        }
    });


    new Vue({
        el: '#app',
        data: {
            total: '父組件的數(shù)據(jù):'
        },
        methods: {
            incrementTotal: function (e) { // 步驟4
                this.total = this.total + e[0]
                console.log(e);
            }
        }
    })
</script>

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

// main.js
Vue.prototype.$EventBus = new Vue() // 注意:這種方式初始化的EventBus是一個全局的事件總線

<!-- A.vue -->
<template>
    <button @click="sendMsg()">-</button>
</template>

<script> 
import { EventBus } from "../event-bus.js";
export default {
  methods: {
    sendMsg() {
      EventBus.$emit("aMsg", '來自A頁面的消息'); // 對外發(fā)送數(shù)據(jù)
    }
  }
}; 
</script>

<!-- B.vue -->
<template>
	<p>{{msg}}</p>
</template>

<script> 
import { EventBus } from "../event-bus.js";
export default {
	data() {
		return {
			msg: ''
		}
	},
	mounted() {
		EventBus.$on("aMsg", (msg) => { // 接收 A 發(fā)送來的消息
			this.msg = msg;
		});
	}
};
</script>

import { EventBus } from "../event-bus.js";
EventBus.$off('aMsg', {})