Vue中全局事件总线

* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客，仅做学习讨论之用，不做商业用途。
* 如有侵权，马上联系我，我立马删除对应链接。
* @author Alan
* @Email no008@foxmail.com

目录

• Vue中全局事件总线
  • 1：全局事件总线
  • 2：示例代码结构
  • 3：代码内容
  • 4：展示界面效果

 

正文

回到顶部

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：展示界面效果