笔记

全局事件总线：任意组件间通信。

事件总线的原理:

源码

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//084
//Vue.prototype //表示 Vue的原型对象
Vue.prototype.x = {a:1, b:2}


//创建vm
new Vue({
    el:'#app',
    render: h => h(App),

    //081
    /*mounted(){
        setTimeout(()=>{
            this.$destroy() //此时 this 指 vm
        },3000)
    },*/
})

School.vue

<template>
    <div class="school">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>

        <button @click="sndSchoolName">把学校名给App</button>
    </div>
</template>

<script>
    export default {
        name:'SchoolVue',

        props:['getSchoolName'],

        data() {
            return {
                name:'尚硅谷',
                address:'北京',
            }
        },

        //084
        mounted(){
            console.log('School', this.x)
        }
    }
</script>


<!-- 我们在 vue组件中写的样式，最终都被汇总在一起。此时容易出现一个问题：样式名冲突。 为了解决这个问题： 添加 scoped，表示其中的样式只负责本组件 -->
<style scoped>
    .school{
        background-color: skyblue;

        padding: 5px;
    }
</style>

其中上面源码中 mounted(){this.x} 是如何找到 main.js 中 Vue.prototype.x = {a:1, b:2} 的 x 呢?
因为 x 在 main.js 中被添加到了 Vue的原型对象，所以按下图绿色粗线所示： this.x 先在 School.vue组件自己身上找，如果没找到，就去 原型(vc的原型对象) 上找，如果 原型 上没有，就到 Vue的原型对象上找。