问题描述

使用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
        }
    },