Vue状态管理-Bus

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.父子组件之间进行通讯：

父组件通过属性和子组件通讯，子组件通过事件和父组件通讯。vue2.x只允许单向数据传递。

先定义一个子组件AInput.vue:

<template>
<div>
<input @input="handleInput" :value="value"/>
</div>
</template>
<script>
export default {
name:'AInput',
props:{
value:{
type:[String,Number],
default:''
}
},
methods:{
handleInput(event){
const value=event.target.value;
this.$emit('input',value);
}
}
}
</script>

在父组件store.vue中引用子组件：

<template>
<div>
<a-input :value="inputValue" @input="handlerInput"></a-input>
<p>{{inputValue}}</p>
</div>
</template>
<script>
import AInput from "_c/AInput.vue";
export default {
name: "store",
data() {
return {
inputValue: ""
};
},
components: {
AInput: AInput
},
methods: {
handlerInput(val) {
this.inputValue = val;
}
}
};
</script>

由于v-model可以进行双向数据绑定，所以store.vue的写法等效于：

<template>
<div>
<a-input v-model="inputValue"></a-input>
<p>{{inputValue}}</p>
</div>
</template>
<script>
import AInput from "_c/AInput.vue";
export default {
name: "store",
data() {
return {
inputValue: ""
};
},
components: {
AInput: AInput
}
};
</script>

实现效果：

2.兄弟之间进行通讯：

2.1如果是同一页面之间的子组件进行通讯：

<template>
<div>
<a-input :value="inputValue" @input="handlerInput"></a-input>
<a-show :content="inputValue"/>
</div>
</template>
<script>
import AInput from "_c/AInput.vue";
import AShow from "_c/AShow.vue";export default {
name: "store",
data() {
return {
inputValue: ""
};
},
components: {
AInput: AInput,
AShow:AShow
},
methods: {
handlerInput(val) {
this.inputValue = val;
}
}
};
</script>

<template>
<div>
<p>AShow: {{ content }}</p>
</div>
</template>
<script>
export default {
props: {
content: {
type: [String, Number],
default: ""
}
}
};
</script>

2.2如果是不同页面之间的子组件进行通讯，需要借助借助中央事件总线

新建一个bus.js：

import Vue from 'vue'
const Bus =new Vue();
export default Bus;

在main.js中引用Bus，同时在Vue实例原型增加$bus:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Bus from './lib/bus'Vue.config.productionTip = false
Vue.prototype.$bus = Bus;new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

App.vue:

<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link>|

<router-link :to="{name:'about'}">About</router-link>
</div>

<router-view/>
<router-view name="email"/>
<router-view name="tel"/>
</div>
</template><style lang="less">
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>

下面演示：http://localhost:8080/#/named_view页面中email和tel组件进行通信：

email.vue:

<template>
<div class="email">
<button @click="handleClick">点击我向tel.vue组件传递消息</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
this.$bus.$emit("on-click", "hello,我是通过email传递的");
}
}
};
</script>
<style>
.email {
border: 1px solid green;
}
</style>

在tel.vue中监听事件：

<template>
<div class="tel">
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ""
};
},
mounted() {
this.$bus.$on("on-click", mes => {
this.message = mes;
});
}
};
</script>
<style>
.tel {
border: 1px solid red;
}
</style>