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进阶