使用Vuex实现兄弟组件间传值。

另一种常规方法也应该知道，就是使用：eventBus

$emit自定义事件

  methods:{
        addList:function(){
            eventBus.$emit('add',this.todoList)
        }

$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中

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

我们再看一下父子组件之间传值。

父传子比较简单，通过 v-bind来直接传参，当然需要在子组件中写props

// 某个子组件中：
export default {
  props: {
    title: {
      type: String,
      default: 'hello world'
    }
  }
}

父组件中直接

<h2 :title="post.title+'作者：'+post.author"></h2>

子传父则需要通过使用$on(evntName)监听事件；使用$emit(eventName,optionalPayload)触发事件。另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。

<!-- 父组件 -->
<template>
    <div class="test">
      <test-com @childFn="parentFn"></test-com>
      <br/> 
      子组件传来的值 : {{message}}
    </div>
</template>
<script>
export default {
    // ...
    data() {
        return {
             message: ''
        }
    },
    methods: {
       parentFn(payload) {
        this.message = payload;
      }
    }
}
</script>

在子组件中我们需要写this.$emit来传递参数

<!-- 子组件 -->
<template> 
<div class="testCom">
    <input type="text" v-model="message" />
    <button @click="click">Send</button>
</div>
</template>
<script>
export default {
    // ...
    data() {
        return {
          // 默认
          message: '我是来自子组件的消息'
        }
    },
    methods: {
      click() {
            this.$emit('childFn', this.message);
        }
    }    
}
</script>