import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//給Vue綁定屬性
Vue.prototype.xyz=100;
// Vue.prototype.$EventBus=vm

new Vue({
  beforeCreate(){
  //安裝事件總線
  Vue.prototype.abc=900;
  Vue.prototype.$EventBus=this
 },
  render: h => h(App),
}).$mount('#app')

<!--  -->
<template>
  <div id="demo01">
    <h1>Demo01組件</h1>
    <h2>從Demo02接受的收據(jù)：{{msg}}</h2>
    <button @click="fasong">發(fā)送數(shù)據(jù)給Demo02</button>
  </div>
</template>

<script>
export default {
  name: "Demo01",
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    test01 (data) {
      console.log(data);
      this.msg = data
    },
    fasong () {
      this.$EventBus.$emit("send", "我是Demo01頁面");
    }
  },
  mounted () {
    // console.log(this);
    // 2.接受全局的haha事件
    this.$EventBus.$on('haha', this.test01)
  }
}
</script>
<style scoped>
#demo01 {
  background-color: red;
  padding: 20px;
  margin-bottom: 20px;
}
</style>

<!--  -->
<template>
  <div id="demo02">
    <h1>Demo02組件</h1>
    <button @click="sendData">發(fā)送事件給Demo01</button>
    <h2>從Demo01接受的收據(jù)：{{msg}}</h2>
  </div>
</template>

<script>
export default {
  name: "Demo02",
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    sendData () {
      // 觸發(fā)全局的haha事件
      this.$EventBus.$emit("haha", '老王')
    },
    display (data) {
      console.log(data);
      this.msg = data
    }
  },
  mounted () {
    // console.log(this.abc);
    console.log(this.$EventBus);
    this.$EventBus.$on("send", this.display)
  }
}
</script>
<style scoped>
#demo02 {
  background-color: blue;
  padding: 20px;
}
</style>

  beforeDestory () {
    //移除事件監(jiān)聽send
    this.$EventBus.off("send")
  }