状态管理-Bus

Bus的简单使用

创建bus文件夹，创建index.js

import Vue from 'vue'
const Bus = new Vue()
export default Bus

并且在main.js中全局引入并配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Bus from './bus'
Vue.config.productionTip = false
Vue.prototype.$bus = Bus
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

简单实例

email.vue负责触发

<template>
	<div class="email">
		<button @click="handleClick">按我</button>
	</div>
</template>
<script>
export default {
  methods: {
    handleClick () {
      // this.$bus.$emit('on-click', 'hello')
      this.$emit('on-click', 'hello')
    }
  },
  mounted () {
    this.$on('on-click', mes => {
      console.log(mes)
    })
  }
}
</script>
<style lang="less" scoped>
.email{
	border: 1px solid green;
}
</style>

tel.vue负责监听

<template>
	<div class="tel">
		<p>{{message}}</p>
	</div>
</template>
<script>
export default {
  data () {
    return {
      message: ''
    }
  },
  mounted () {
    this.$bus.$on('on-click', mes => {
      this.message = mes
    })
  }
}
</script>
<style lang="less" scoped>
.tel {
	border:1px solid red
}
</style>