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
宝宝起名-宝宝起名-更懂年轻父母的起名顾问
更多相关文章
- 面向千万级用户的运维事件管理之路
- UML软件开发与建模工具Enterprise Architect组件模型
- 漫谈Android组件化及Web化
- 降低大数据开发难度，轻量级计算实例
- 2，StructuredStreaming的事件时间和窗口操作
- 重磅：Flume1-7结合kafka讲解
- 原创 | 从ZOOM个人信息安全事件浅谈视频会议软件的数据保护
- 原创 | 2019年工控行业网络安全事件回顾
- 网易 SaaS 产品精益之路 | 从越来越多的内容安全事件说起