Vue中的组件传值

1.父传子

通过props传值
语法：v-bind:子组件props中的变量名= “父组件中的data中定义的数据”

• 父组件：

Vue.component('Father',{
    template: '#father',
    data () {
      return {
        money: 2000
      }
    }
  })

• 子组件：通过props['value'] 接收父组件传递过来的数据，相当于在data中定义了，可以直接使用

Vue.component('Son',{
    template: '#son',
    // props: ['money']
    // props: { //属性校验
    //   money: Number
    // }
      props: {
        money: {
          validator (val) {
           
            return val > 3000
          }
        }
      }
  })

2.子传父

• 父组件：<Child @receive= 'receive'/>
• 子组件：this.emit('receive','传递的数据')

3.兄弟组件传值

• 通过vuex进行传值
• 通过事件总线 let eventBus = new Vue()

//兄弟1：
methods:{
  函数名{
   eventBus.emit('自定义事件名'，传的数据)
   }
}

//兄弟2：
created(){
   eventBus.$on('兄弟1发送的自定义的事件名'，回调函数)//对数据进行接收
}
兄弟2：