eventBus 事件总线传值

组件传参的方式有很多,记录下bus中央事件总线传参,主要适用于兄弟组件的传参,如果有一个共同的修改数据,可以用store模式,项目复杂,建议用vuex

1. vue.js中的 $on方法

vm.$on

意思就是vue实例上面有$on和$emit,可以进行传参,那我们能不能利用他进行组件中的传值呢?

2.eventBus 传值(局部使用)

需求:将Test1.vue中的count,传到Test2

2.1 建立eventBus.js

import Vue from 'vue'
// 中央事件总线
export default new Vue()

2.2 兄弟组件之间传参 App.vue

<template>
  <div id="app">
    <Test1/>
    -------------------
    <Test2/>
  </div>
</template>

<script>
import Test1 from './components/Test1.vue'
import Test2 from './components/Test2.vue'

export default {
  name: 'App',
  components: {
    Test1,
    Test2,
  }
}
</script>

Test1.vue

<template>
  <div class="hello">
    <button @click="add()">Test1增加</button>
  </div>
</template>
<script>
import bus from '../assets/eventBus'
export default {
  name: 'Test1',
  data() {
    return {
      count: 5,
    }
  },
  methods: {
    add() {
      bus.$emit('count', this.count)
    }
  }
}
</script>

Test2.vue

<template>
  <div class="hello">
    <div>{{count}}</div>
  </div>
</template>
<script>
import bus from '../assets/eventBus'
export default {
  name: 'Test2',
  data() {
    return {
      count: ''
    }
  },
  created() {
    bus.$on('count', (val) => {
      this.count = val
    })
  }
}
</script>

3.全局注册（全局使用)

接上修改一下3个文件:

1. main.js中引入

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
import bus from './assets/eventBus'

new Vue({
  render: h => h(App),
  data: {
    bus, // 
  }
}).$mount('#app')

2.组件中使用 Test1.vue

<template>
  <div class="hello">
    <button @click="add()">Test1增加</button>
  </div>
</template>
<script>
export default {
  name: 'Test1',
  data() {
    return {
      count: 5,
    }
  },
  methods: {
    add() {
      this.$root.bus.$emit('count', this.count)
    }
  }
}
</script>

Test2.vue

<template>
  <div class="hello">
    <div>{{count}}</div>
  </div>
</template>
<script>
export default {
  name: 'Test2',
  data() {
    return {
      count: ''
    }
  },
  created() {
    this.$root.bus.$on('count', (val) => {
      this.count = val
    })
  }
}
</script>

以上也可以直接挂在vue的原型链上

4推荐与参考

Vue兄弟组件传值 ------ bus 中央事件总线
store模式&Vuex使用-简单案例入门

前段时间情绪低迷,终于开启了很久就想写又没有写的公众号,主要是记录在前端行业中的摸爬滚打以及生活中真实趣事与感悟。
虽然没有代码天赋，但是不能放弃,慢慢进步呀~

公众号: 程序媛爱唠嗑
欢迎关注，一起唠嗑！