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

Bus

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

{

path:’/store’,

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

}

components的AInput.vue

<input @input=“handleInput” :value=“value”>//绑定input事件和value值

store.vue

//使用input组件

//v-model双向绑定(相当于语法糖，相当于 ：value=“inputValue” @input=“handleInput”)

{ { inputValue }}//显示inputValue

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

兄弟之间通信

新建components组件 Ashow.vue

{ { content }}

在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