vue 组件传值-父传子、子传父、兄弟传参

父传子：

父组件：

dataAndTime 为传递到子组件的数据（绿色部分）

子组件：

用props接收数据，使用时this.dataAndTime

子传父

父组件 子组件

兄弟组件之间的传参 eventBus

组件1：

    data(){
        return {
            todoList:''
        }
    },
    methods:{
        addList:function(){
         //重点： $emit自定义事件
            eventBus.$emit('add',this.todoList)
        }
    }

组件2:

    created:function(){
        this.acceptList()
    },
    methods:{
        acceptList:function(){
        // 重点：$on接收事件
            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:

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