vue兄弟组件之间的传参

//子传父，父传子

A1要向A2传值 、 可以用$emit传给A、A在使用v-bind传给A2 

<one :msg="msg" @decrease="decrease"/>

<two :msg="msg" @add="add"/>

可以使用计算属性来转换msg

使用父组件做中转

使用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:'任务1',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

        }

    },