Bus
1 新建组件 store.vue, 在路由列表注册, 并在 components 目录下新建一个组件 AInput.vue（本人 创立的组件最好带上前缀）
{
path:’/store’,
component:()=>import(‘@/views/store.vue’)
}
components 的 AInput.vue
<template>
<input @input=”handleInput” :value=”value”>// 绑定 input 事件和 value 值
</template>
<script>
export default{
name:’AInput’,
props:{
value:{// 属性 value
type:[String,Number],
default:”
},
methods:{
handleInput(event){
const value = event.target.value// 获取文本框输出值
this.$emit(‘input’,value)// 把获取到的值传出去
// 留神为什么不能间接在这里批改 value 值，这是 vuex 强调的单向数据流，父级组件之间传值，值的批改肯定是通过父组件，如果向组件与子组件传值肯定是通过属性，而子组件想批改父组件传来的值肯定要通过事件形式来批改
}
}
}
}
</script>
store.vue
<template>
<div>
// 应用 input 组件
<a-input v-model=’inputValue’ />//v-model 双向绑定 (相当于语法糖，相当于：value=”inputValue” @input=”handleInput”)
{{inputValue}}// 显示 inputValue
</div>
</template>
<script>
import AInput from ‘_c/AInput.vue’ // 引入组件
export default{
name:’store’,
components:{// 注册组件
AInput
},
data(){
return {
inputValue:”
}
}
}
</script>
实现过程 input 标签绑定 handleInput 事件，当 input 值批改时会触发 input 里的事件，从而执行 handleInput 办法，值的显示是通过 value
兄弟之间通信
新建 components 组件 Ashow.vue
<template>
{{content}}
</template>
<script>
export default{
props:{
content:{// 属性 value
type:[String,Number],
default:”
}
</script>
在 store.vue 引 Ashow.vue 注册组件
import Ashow from ‘_c/Ashow.vue’
<a-show :content=”inputValue” />
<!—–>
// 跨文件之间如何通信：应用 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”> 点击我 </button>
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
宝宝起名 - 更懂年老父母的起名参谋