Vue技术栈开发实战（三）——状态管理Bus的使用

Bus的使用

我们在不相关的两个组件中传递数据，可以使用bus，原理就是给bus向外触发事件，然后bus监听事件触发

在lib目录下新建新建bus.js，写入

import Vue from 'vue'

const Bus = new Vue()

export default Bus

然后在main.js中导入这个index.js，并在实例原型中注入这个bus

import Bus from '@/lib/bus'

Vue.prototype.$bus = Bus

第一个组件中写入 

<template>
  <div>
    <button @click="handleClick">点击</button>
  </div>
</template>

<script>
export default {
  mounted () {
    console.log(this.$bus)
  },
  methods: {
    handleClick () {
      this.$bus.$emit('click', 'hello')
    }
  }
}
</script>

第二个组件中写入 

<template>
  <div>
    <p>{{msg}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: ''
    }
  },
  mounted () {
    this.$bus.$on('click', msg => (this.msg = msg))
  }
}
</script>

 

 

Vuex基础——state，getter

Vuex基础——mutation，action/module

Vuex进阶