Vue技术栈开发学习之状态管理bus的使用
Posted Lumoom
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue技术栈开发学习之状态管理bus的使用相关的知识，希望对你有一定的参考价值。
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
宝宝起名-更懂年轻父母的起名顾问
以上是关于Vue技术栈开发学习之状态管理bus的使用的主要内容，如果未能解决你的问题，请参考以下文章