问题描述
使用vue以来，一直都没有考虑过兄弟组件之间的通信，那么问题来了，兄弟组件之间如何传递数据了？
问题描述.png
准备工作
使用vue-cli构建项目
vue-cli构建工具.png
生成的目录结构
生成的目录结构.png
例子的其他功能不做描述，只对兄弟组件这部分做分析
使用eventBus解决问题
eventBus的核心理论我也不太清楚。这里对如何使用做下说明
1.创建一个空Vue对象
import Vue from 'vue';
export default new Vue();
2.$emit自定义事件
<input type="text" v-model="todoList">
<button class="add" @click='addList'>增加</button>
data(){
return {
todoList:''
}
},
methods:{
addList:function(){
eventBus.$emit('add',this.todoList)
}
}
3.$on接收事件
created:function(){
this.acceptList()
},
methods:{
acceptList:function(){
eventBus.$on('add',(message)=>{
this.lists.push({ name:message,isFinish:false })
})
}
}
使用vuex解决问题
创建store对象
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
var store=new Vuex.Store({
//存储状态
state:{
lists:[
{ name:'数学作业',isFinish:false },
{ name:'语文作业',isFinish:false },
{ name:'化学作业',isFinish:false },
{ name:'物理作业',isFinish:false }
]
},
//显示的更改state
mutation:{},
//过滤state中的数据
getters:{},
//异步操作
actions:{}
});
export default store;
在组建中引入并使用
在组件1中
<input type="text" v-model="todoList">
<button class="add" @click='addList'>增加</button>
data(){
return {
todoList:''
}
},
store:store,
methods:{
addList:function(){
this.$store.state.lists.push({name:this.todoList,isFinish:false})
}
}
在组件2中
computed:{
lists:function(){
return this.$store.state.lists
}
},
