Vue技术栈开发学习之状态管理bus的使用

Bus

1新建组件store.vue,在路由列表注册,并在components目录下新建一个组件AInput.vue（自己 创建的组件最好带上前缀）

{

path:'/store',

component:()=>import('@/views/store.vue')

}

components的AInput.vue

store.vue

实现过程input标签绑定handleInput事件，当input值修改时会触发input里的事件，从而执行handleInput方法，值的显示是通过value

兄弟之间通信

新建components组件 Ashow.vue

在store.vue引Ashow.vue注册组件

import Ashow from '_c/Ashow.vue'

//跨文件之间如何通信：使用bus

定义文件夹bus,并创建index.js文件

import Vue from 'vue'//引入Vue

const Bus = new Vue()//创建实例

export default Bus//导出

然后在main.js把bus引入 import Bus from './bus'

Vue.prototype.$bus = Bus //在Vue的原型对象上添加Bus(把bus注册到根实例)

在之前Vue技术栈开发学习，Vue路由学习基础篇创建的email.vue添加

<button @click="handleClick">点击我

export default{

methods:{

handleClick(){

this.$bus.$emit('on-click','hahaha')//传到bus

}

}

mount(){//生命周期

console.log(this.$bus)//创建一个空的bus实例，来作为交互的中介

}

}

在之前Vue技术栈开发学习，Vue路由学习基础篇创建的phone.vue用来接收email的事件

例如显示message

{{ message }}

export default{

data(){

return {

message:''

}

},

mount(){//生命周期

this.$bus.$on('on-click',mes=>{//bus事件监听

this.message = mes

})

}

}

优化bus

不把bus单独放一个文件夹 bus/index.js重命名为bus.js并一直lib文件夹下，引入是路径改为./lib/bus

宝宝起名-更懂年轻父母的起名顾问