vue组件间传值，父传子&&子传父&&非父子(兄弟组件)之间传值

props父传子

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。
子组件通过props方法接受数据;

<!--父组件-->
<template>
  <div>
<p>parents</p>
<Child :default-set="arr"></Child>
  </div>
</template>
<script>
import Child from './Child'
export default {
  components: {
    Child
  },
  data () {
    return {
      arr: [1, 2, 3, 4, 5, 6]
    }
  }
}
</script>

<!--子组件-->
<template>
  <div>
    <p>child{{lists}}</p>
  </div>
</template>
<script>
export default {
  props: {
    defaultSet: { // 驼峰式命名 对应父组件里的default-set
      type: Array,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      lists: this.defaultSet
    }
  }
}
</script>

去了解prop验证

$emit子传父，用事件来传值

$emit方法传递参数

<!--父组件-->
<template>
  <div>
<p>parents</p>
<Child  @cancel="cancelCallBack"></Child>
{{message}}
  </div>
</template>
<script>
import Child from './Child'
export default {
  components: {
    Child
  },
  data () {
    return {
      message: ''
    }
  },
  methods: {
    cancelCallBack (e) {
      console.log(e)
      this.message = e
    }
  }
}
</script>

<!--子组件-->
<template>
  <div class="child">
    <p>child</p>
    <button @click="fn">传到父组件</button>
  </div>
</template>
<script>
export default {
  methods: {
    fn () {
      let msg = '来自子组件的数据666'
      this.$emit('cancel', msg)	//此处cancel，要对应父组件中@cancel（可以自定义但必须相同）		
      						
    }
  }
}
</script>
<style scoped>
.child{
  background-color: yellow;
}
</style>

EventBus（非父子）兄弟间传值

非父子组件间的数据传递，兄弟组件传值
eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。

import Vue from 'vue'
export const EventBus = new Vue()

<!--兄弟组件B1-->
<template>
  <div class="box">
<p>兄弟组件B1</p>
<button @click="sendMsg">发送消息</button>
  </div>
</template>
<script>
import { EventBus } from '../store/event-bus.js'
export default {
  methods: {
    sendMsg () {
      EventBus.$emit('pramas', '来自B1的数据666')
    }
  }
}
</script>
<style scoped>
.box{
  background-color: yellow;
}
</style>

<!--兄弟组件B2-->
<template>
  <div class="box">
<p>兄弟组件B2</p>
  <p style="color:yellow">{{msg}}</p>
  </div>
</template>
<script>
import { EventBus } from '../store/event-bus.js'
export default {
  data () {
    return {
      msg: ''
    }
  },
  mounted () {  
    EventBus.$on('pramas', e => {	
      this.msg = e
    })
  }
}
</script>
<style scoped>
.box{
  background-color:red;
}
</style>

两个兄弟组件，引入到同一个父组件中使用：

<template>
  <div class="hello">
	<Brother1></Brother1>
	<Brother2></Brother2>
  </div>
</template>
<script>
import Brother1 from '../pages/Brother1'
import Brother2 from '../pages/Brother2'
export default {
  name: 'HelloWorld',
  components: {
    Brother1, Brother2
  }
}
</script>

此处的pramas ，要对应兄弟组件B2中的pramas（可以自定义但必须相同）

B1传递数据 EventBus.$emit(‘pramas’, ‘…’)

B2接收数据 EventBus.$on(‘pramas’, e => { … })

欢迎留言指正！