VueBus

VueBus(Vue事务总线）

Vuex：主要用来存储数据

Bus:公交车

先有接收方： 监听动作

再有触发方： 触发的动作

分三步: 导入到项目

1, 下包(导包), 导入文件,

2, 在项目中配置,引入到项目 

3, 使用

1. 创建一个bus文件夹，里面有个js文件

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

2.在A,B组件中引入js文件

1）left

<template>
  <div>
    <div class="left-div" @click="click1(1)">首页</div>
    <div class="left-div" @click="click1(2)">百度</div>
    <div class="left-div" @click="click1(3)">淘宝</div>
  </div>
</template>

<script>
import Bus from '../bus'
export default {
  name: 'Left',
  methods: {
    click1: function (parm) {
        //第一种
        // Bus.$emit('change', parm)

        //第二种
        this.$Bus.$emit('change', parm)
    }
  }
}
</script>

<style scoped>
.left-div{
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid silver;
}

</style>

2）right文件

<template>
  <div>
    <right1 v-if="tag == 1" style="width: 100%; height: 100%;">
      首页
    </right1>
    <right2 v-else-if="tag == 2" style="width: 100%; height: 100%;"></right2>
    <right3 v-else-if="tag == 3" style="width: 100%; height: 100%;"></right3>
  </div>
</template>

<script>
import Bus from '../bus'
import Right1 from './Rigt/Right1'
import Right2 from './Rigt/Right2'
import Right3 from './Rigt/Right3'
export default {
  name: 'Right',
   data () {
        return{
            tag: 0
        }
   },
  components: {
    Right1,
    Right2,
    Right3
  },
  mounted() {
      //可能这是第一种方法
      // Bus.$on('change', parm => {
      //    this.tag = parm
      // })
      
      //这是第二种方法：
      this.$Bus.$on('change', parm => {
         this.tag = parm
      })
  }
}
</script>

<style scoped>

</style>

3）在A组件中要定义调用B事件的bus事件名

 Bus.$emit('change', parm)

4）在B组件中调用C方法

Bus.$on('change', parm => {
    this.tag = parm
})
//第一个参数是在A组件中定义的名字
//第二个参数是要调用的方法

 

一个页面是如何产生的？