Vue component values – parent to child, child to parent, brother to parameter

Father the son:

The parent component:

DataAndTime is the data passed to the child component (green)

Child components:

Received data with props, this.dataandTime is used

Child the parent

The parent componentChild components

Pass parameter eventBus between sibling components

Component 1:

Data (){return {todoList:''}}, methods:{addList:function(){$emit('add', this.todolist)}}Copy the code

Component 2:

Created :function(){this.acceptList()}, methods:{acceptList:function(){ $on receive events eventBus. $on (' add ', (the message) = > {this. Lists. Push ({name: message, isFinish: false})})}}Copy the code

VUEX(can be seen with the link between the siblings above)

Creating a Store object

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); Var store=new vuex. store ({lists:[{name:' math homework ',isFinish:false}, {name:' language homework ',isFinish:false}, {name:' chemical job ',isFinish:false}, {name:' physical job ',isFinish:false}]}, state mutation:{}, getters:{}, // Actions :{}}); export default store;Copy the code

Component 1:

    data(){
        return {
            todoList:''
        }
    },
    store:store,
    methods:{
        addList:function(){
            this.$store.state.lists.push({name:this.todoList,isFinish:false})
        }
    }
Copy the code

Component 2:

    computed:{
        lists:function(){
            return this.$store.state.lists
        }
    },
Copy the code