vue 组件间的通信，父传子，子传父，兄弟组件传值

---

---

一. 父组件传子组件

父组件中 在子组件标签上上通过 属性=属性值 的方式传递值，在子组件内部通过props配置项来接收;

props 接收数据的方式有两种：数组形式和对象形式;

---

二. 子组件传父组件

1. 子组件通过this.$emit(“自定义的事件名”,“要传递给父组件的数据”);
   在父组件中，给整个子组件注册对应自定义事件的函数，这个函数的默认参数就是子组件传递给父组件的数据 ;

   注意： 如果要传递其他的参数，还想保留子组件传递给父组件的参数 ，请用 $event ;
   <child @handlerClick = fn($event,10)></child>

2. 如果父传子 传递的数据是一个函数类型（function） 则也可以用来子传父，但不建议

	// parent.vue
	<template>
	  <div>
	    <child :fn="fn"></child>
	  </div>
	</template>
	<script>
	import child from '@/components/child.vue';
	export default {
	  components: { child },
	  methods: {
	    fn(val){
	      console.log(val);
	    }
	  }
	};
	</script>

	// child.vue
	<template>
	    <div class="child">
	        <span @click="childClick"> 点击传值</span>
	    </div>
	</template>
	
	<script>
	export default {
	    props:["fn"],
	    methods:{
	        childClick(){
	        	// 这里就是正常的调用方法 可以传参，父组件接收
	            this.fn(10)
	        }
	    }
	}
	</script>

---

三. 兄弟组件之间传值

最简单的就是用vuex

一种常见的方法用于兄弟组件之间的通信

1. 创建一个空的vue实例eventBUS,将其挂载到vue原型上;
   Vue.prototype.$bus = new Vue()
2. 通过this.$bus.$emit(‘事件名’,‘要传递出的数据’)传到空的vue实例中;
3. 通过this.$bus.$on(‘事件名’,(参数)=>{挂载从兄弟组件传来的数据})来接收;

   注意： 一定要用箭头函数 来让this 指向外面的组件实例;

---