全局总线，发布和订阅

本文最后更新于2024.05.30-05:17，某些文章具有时效性，若有错误或已失效，请在下方留言或联系涛哥。

1，全局总线

a,在main.js里声明一个全局事件总线

beforeCreate(){
    Vue.prototype.$bus=this;//声明一个全局事件总线
  }

b,school.vue

<template>
  <div>
    <Student :stu="students"></Student>
  </div>
</template>

<script>
import Student from '../components/Student.vue'
export default {
name:'School',
components:{
    Student
},
data(){
    return{
        students:[
            {id:1,name:'张三',age:20,sex:'男'},
            {id:2,name:'李四',age:20,sex:'男'},
            {id:3,name:'王五',age:20,sex:'男'}
        ]
       
    }
},
mounted(){//页面渲染之后
    this.$bus.$on('leave',(data)=>{//发布全局样式
        console.log("学生有人请假",data);
    })
},
beforeDestroy(){
    // 组件回调的时候移除
    this.$bus.this.$off('leave');
}
}
</script>

<style scoped>

</style>>

</style>

c,student.vue

<template>
  <div>
    <div v-for="s in stu" :key="s.id">
      <h1 >姓名：{{s.name}}  年龄：{{s.age}}  性别：{{s.sex}}</h1><button @click="leave(s.name)">我要请假</button>
    </div>
      
  </div>
</template>

<script>
export default {
name:'Student',
props:['stu'],
methods:{
  leave(name){
      this.$bus.$emit('leave',name);
  }
},
computed:{
  newName:function(){
    return
  }
}
}
</script>

<style scoped>

</style>>

</style>

d,App.vue

<template>
  <div>
    <div v-for="s in stu" :key="s.id">
      <h1 >姓名：{{s.name}}  年龄：{{s.age}}  性别：{{s.sex}}</h1><button @click="leave(s.name)">我要请假</button>
    </div>
      
  </div>
</template>

<script>
export default {
name:'Student',
props:['stu'],
methods:{
  leave(name){
      this.$bus.$emit('leave',name);
  }
},
computed:{
  newName:function(){
    return
  }
}
}
</script>

<style scoped>

</style>>

</style>

2，发布和订阅

a，下载pubsub-js插件

npm i pubsub-js

import pubsub from 'pubsub-js';

b，school.vue

<template>
  <div>
    <Student :stu="students"></Student>
  </div>
</template>

<script>
import Student from '../components/Student.vue'
import pubsub from 'pubsub-js';
export default {
name:'School',
components:{
    Student
},
data(){
    return{
        students:[
            {id:1,name:'张三',age:20,sex:'男'},
            {id:2,name:'李四',age:20,sex:'男'},
            {id:3,name:'王五',age:20,sex:'男'}
        ]
       
    }
},
mounted(){//页面渲染之后
    this.pub=pubsub.subscribe('leave',(data,name)=>{//发布全局样式
        console.log(name+"有人请假",data);
    })
},
beforeDestroy(){
    // 当组件摧毁取消订阅
   pubsub.unsubscribe(this.pub);
}
}
</script>

<style scoped>

</style>>

</style>

c，student.vue

<template>
  <div>
    <div v-for="s in stu" :key="s.id">
      <h1 >姓名：{{s.name}}  年龄：{{s.age}}  性别：{{s.sex}}</h1><button @click="leave(s.name)">我要请假</button>
    </div>
      
  </div>
</template>

<script>
import pubsub from 'pubsub-js';
export default {
name:'Student',
props:['stu'],
methods:{
  leave(name){
      pubsub.publish('leave',name);
  }
}
}
</script>

<style scoped>

</style>>

</style>

d，app.vue

<template>
  <div id="app">
   <School></School>
  </div>
</template>

<script>
//引入组件
import School from './components/School.vue'
import Student from './components/Student.vue'
export default {
  name: 'App',
  components: {//注册组件
    School,
    Student
  }
}
</script>

<style scoped>
.myList{
  margin-top: 25px;
}
.bgcolor{
    background-color: yellow;
}
</style>