详解vue中的组件通信的几种方式，父子组件通信，兄弟组件通信，父组件触发子组件事件，子组件无法接受值的问题（一）

 在另一篇文章我们会谈及祖父孙三级之间的通信，传送门：vue组件通信的方式（二）

1.父组件向子组件传值（绑定属性）：:tosonData="fatherdata"绑定，props接受值

首先我们定义一个父组件father.vue：

<template>
  <div>
    <div style="margin-top:50px">
        <div>
            父组件：
            <span>展示子组件的值：{{sondata}}</span>
        </div>
        <son :tosonData="fatherdata"></son>
    </div>
  </div>
</template>

<script>
import son from '@/components/son.vue'
export default {
    data() {
        return {
            fatherdata: '我是父组件的值',
            sondata: ''
        }
    },
    components: {
        son
    }

}
</script>

<style>

</style>

子组件son.vue：

<template>
    <div style="border:1px solid red">
      子组件:
      <span>接受父组件的值：{{tosonData}}</span>
    </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    props: {
        tosonData: String
    }
}
</script>

<style>

</style>

2.子组件向父组件传值（$emit触发自定义事件并传值，父组件绑定该事件接受）

父组件：

<template>
  <div>
    <div style="margin-top:50px">
        <div>
            父组件：
            <span>展示子组件的值：{{sondata}}</span>
        </div>
        <son @tofatherdataHandle="getsondata"></son>
    </div>
  </div>
</template>

<script>
import son from '@/components/son.vue'
export default {
    data() {
        return {
            sondata: ''
        }
    },
    components: {
        son
    },
    methods: {
        getsondata(val) {
            this.sondata = val
        }
    }

}
</script>

<style>

</style>

子组件：

<template>
    <div style="border:1px solid red">
      子组件:
      <Button type="primary" @click="tofatherdataBtn">子组件按钮</Button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tofatherdata: '我是子组件的值'
        }
    },
    methods: {
        tofatherdataBtn() {
            this.$emit('tofatherdataHandle', this.tofatherdata)
        }
    }
}
</script>

<style>

</style>

展示结果： 

 

3.兄弟组件传值（定义一个vue空实例作为桥梁）：

首先我们在main.js中定义vue空实例

//创建vue空实例
let hub=new Vue()
Vue.prototype.$eventhande = hub //加入vue原型中，让所有组件可以访问到该对象

然后在定义一个兄弟组件brother.vue：

<template>
	<div>
		<h1>我是子组件的兄弟组件</h1>
		<button @click="todata">摁我传值给兄弟组件</button>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				brotherdata:"我是传给兄弟组件的数据"
			}
		},
		methods:{
			todata(){
//				触发自定义事件change,传入brotherdata值
				this.$eventhande.$emit('change',this.brotherdata)
			}
		}
	}
</script>

然后我们在另外一个兄弟组件接受该值就OK了，如图1和图2的father.vue,和son.vue

4.父组件触发子组件的事件

在使用this.$set()修改数组数据进行响应式更新页面dom时，有可能会不成功，可以尝试先执行删除该属性：this.$delete(this.list[this.select], 'left')，再修改该属性数据：this.$set(this.list[this.select], 'left', 20)

子组件：

<template>
	<div>
		<p>子组件事件</p>
	</div>
</template>

<script>
	export default{
		data() {
			return {
			}
		},
		mounted() {
			// 监听父组件触发子组件事件
			this.$on('bridge', (val) => {
			  this.sonAction()
			})
		},
		methods: {
			sonAction() {
			  console.log('子组件事件被触发')
			}
		}
	}
</script>

<style>
</style>

父组件：

<template>
	<div>
		<son ref='code'></son>
		<button @click="btnCode">触发子组件事件</button>
	</div>
</template>

<script>
	import son from '@/components/son.vue'
	export default{
		data() {
			return {
				identifyCode: '', // 生成的验证码
			}
		},
		components: {
		    son
		},
		methods: {
			// 切换验证码(点击文字切换)
			btnCode() {
			  // 触发子组件刷新验证码事件
			  this.$refs.code.$emit('bridge')
			}
		}
	}
</script>

<style>
</style>

5.解决子组件接受不到父组件的值的问题

问题描述：当我们调用接口时，把接口返回的值传入到子组件，但是发现传不过去，是为什么？因为当子组件加载时，接口是异步的，此时的值还没返回来，所以传入子组件的值是初始值，可能为空。

解决办法：监听传入子组件的值，watch

父组件不变，子组件props接受值也不变，加入监听函数：监听时获取到新值，则重新赋值，调用接口即可。

或者用第二种方法好像也可以解决：

 在计算属性中定义另外一个属性，关联type这个属性，当type重新更新了有变化，这个函数中就能拦截到，然后就可以保存或者使用了，和第一种方法原理差不多