Vue中全局事件总线

Vue中全局事件总线

1：全局事件总线

2：示例代码结构

3：代码内容

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false /*关闭语法检查*/
})

main.js

 //引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue生产提示
Vue.config.productionTip=false;
/*
// Vue的线程总线的配置数据存储中间对象。
const  vcObj=Vue.extend({});
const  vc=new vcObj();
Vue.prototype.x=vc;
*/

// 创建Vm
const vm = new Vue(  {
        el:'#app',
        render: (h) => h(App),
        beforeCreate () {
           // Vue的线程总线的配置数据存储中间对象    
           Vue.prototype.$bus=this;  //安装全局事件总线
        }
   });

App.vue

<template>
  <div>
    <hr/>
    <div class="divCss">
        <h1 class="h1Css">{{msg}}</h1>
        <hr/><br/>
        <School />
        <hr/><br/>
        <Student />
        <hr/><br/>
    </div>

  </div>
</template>

<script>

    import School from './components/School.vue';
    import Student from './components/Student.vue';


    export default {
        name:'App',
        data(){
          return{
            msg:"Vue_线程总线",
            studentTomName:''
          }
        },
        components:{
            Student,
            School
        }
    }
</script>

<!--
  1：指定Css 样式的编写方式
  less 最大特点：内容可以嵌套着写

 -->
<style lang="less">
   .divCss{
        background-color: chocolate;
        margin: auto;
        padding: 20px;

        .h1Css{
        font-size: 36px;
        color: white;
   }
   }

</style>

School.vue

<!--
  ## scoped样式

  1. 作用：让样式在局部生效，防止冲突。
  2. 写法：```<style scoped>```
 -->
<template>
    <div  class="ClassStyle">
      <h1  style="color:red">{{msg}}</h1>
      <h2>学校名称：{{name }}</h2>
      <h2>学校地址：{{address}}</h2>
    </div>
</template>

  <script>
      export default {
        name:'School',
        data () {
          return {
            msg:'学校信息',
            name:'华南师范大学',
            address:'广州市天河区中山大道西55号'
          }
        },
        mounted () {
          console.log("School",this.$bus);
          this.$bus.$on('hello',(data)=>{
            console.log('我是School组件， 收到了数据：',this.name);
          });
        },
        beforeDestroy () {
           this.$bus.$off('hello');
        }

      }
  </script>

<!--scoped 控制组件的Css样式为局部样式，不会为同名的cs样式名的冲突导致样式覆盖  -->
  <style  scoped>
    .ClassStyle{
      background-color: aquamarine;
      padding: 5px;
    }
  </style>

Student.vue

<!--
 ## scoped样式

1. 作用：让样式在局部生效，防止冲突。
2. 写法：```<style scoped>```
 -->
<template>
    <div  class="ClassStyle">
      <h1  style="color:red">{{msg}}</h1>
      <h2>学生名称：{{name}}</h2>
      <h2>学生性别：{{sex}}</h2>
      <button @click="sendStudentNameToSchool">把学生名给School组件</button>
    </div>
</template>

  <script>
      export default {
        name:'Student',
        data () {
          return {
            msg:'学生信息:One',
            name:'向北',
            sex:'男',
            score:12
          }
        },
        mounted () {
          console.log("Student",this.$bus);
        },
        methods:{
          sendStudentNameToSchool(){
            this.$bus.$emit('hello',666);
          }
        }

      }
  </script>

 <!--scoped 控制组件的Css样式为局部样式，不会为同名的cs样式名的冲突导致样式覆盖  -->
 <style  scoped>
    .ClassStyle{
      background-color:lightskyblue;
      padding: 5px;
    }
  </style>

4：展示界面效果