Vue全局事件总线-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue全局事件总线。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Vue全局事件总线,linerVue,vue.js,前端,javascript

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from "./App";
//关闭Vue的生产提示
Vue.config.productionTip = false
// const Demo = Vue.extend({})
// const d = new Demo()
// Vue.prototype.x = d//创建vm
new Vue({
    el:'#app',
    render:h=>h(App),
    beforeCreate() {
        Vue.prototype.$bus = this //安装全局事件总线
    }
})

Student.vue

    <button @click="sendStudentName">把学生名给school组件</button>

  methods:{
    sendStudentName(){
      this.$bus.$emit('hello',this.name)
    }
  },

School.vue

 mounted() {
    // console.log("school",this.x)
    this.$bus.$on('hello',(data)=>{
      console.log('我是school组件，收到了数据',data)
    })
  },
  beforeDestroy() {
    this.$off('hello')
  },

TodoList案例优化：

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from "./App";
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
    el:'#app',
    render:h=>h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    }
})

App.vue: 删除之前给Mylist绑定的：checkTodo :deleteTodo

  mounted() {
    this.$bus.$on('checkTodo',this.checkTodo)
    this.$bus.$on('deleteTodo',this.deleteTodo)
  },
  beforeDestroy() {
    this.$bus.$off('checkTodo')
    this.$bus.$off('deleteTodo')
  }

MyList.vue: 删除props接收的checkTodo，deleteTodo，删除给MyItem绑定的：checkTodo :deleteTodo

MyItem.vue: 删除props接收的checkTodo，deleteTodo

  methods:{
    //勾选or取消勾选
    handleCheck(id){
      //通知App组件将对应的todo对象的done值取反
      // this.checkTodo(id)
      this.$bus.$emit('checkTodo',id)
    },
    //删除
    handleDelete(id){
        if (confirm('确定删除吗')){  //confirm根据用户的交互来决定到底是布尔值为真还是为假，点击确定为真，点击取消为假
          // this.deleteTodo(id)
          this.$bus.$emit('deleteTodo',id)
        }
    }
  }

Vue全局事件总线,linerVue,vue.js,前端,javascript