父子组件与兄弟组件之间的通信

1、父子组件通信
1.1 父传子 ----------------------------------------------------------
父组件传值到子组件使用 props
父组件代码：

<template>
    <div>
        <child :msg="parentMsg"></child>
    </div>
</template>

<script>
import child '@/components/child'
export default {
    nane: "index",
    components: {  child  },
    data() {
        return {
            parentMsg: '父组件信息'
		}
    },
   
	methods: {
        
    }

}
</script>

子组件代码：

<template>
    <div>
        <div>{{ msg }}</div>
    </div>
</template>

<script>
export default {
    nane: "",
    data() {
        return {
            
		}
    },
   props: {
		msg: {
            default: null,
            type: String
        }
	}
}
</script>

1.2 子传父 -------------------------------------------------------------------
子组件传值到父组件使用 $emit，父组件通过绑定事件的方式接收子组件传来的值
父组件代码：

<template>
    <div>
        <child @childMsg="childMsgFn"></child>
    </div>
</template>

<script>
import child '@/components/child'
export default {
    nane: "index",
    components: {  child  },
    data() {
        return {
            
		}
    },
	methods: {
        childMsgFn(val) { // 接收参数
        	console.log(val) // 这是子组件信息
    	}
	}
}
</script>

子组件代码：

<template>
    <div>
        <div @click="toParent"></div>
    </div>
</template>

<script>
export default {
    nane: "",
    data() {
        return {
            
		}
    },
	methods: {
        toParent() { // 传递参数
        	this.$emit('childMsg', '这是子组件信息')
    	}
	}
}
</script>

2、兄弟组件通信（非父子组件）
vue官方没有提供兄弟组件之间可直接通信的工具，我们可以使用Vuex统一管理组件之间的数据，但是单纯只用来组件之间的通信有点大材小用，所以我们可以使用“中间件”作为组件间的通信桥梁。
所谓“中间件”就是实例化一个全新的Vue对象，将其封装成公共函数，供组件使用操作
首先创建一个公共util.js

// util.js
import Vue from 'vue'
export default new Vue() // 导出Vue实例

子组件A：

<template>
    <div>
        <div @click="moduleA">按钮</div>
    </div>
</template>

<script>
// 引入中间件
import util from './util.js'
export default {
    nane: "",
    data() {
        return {
            
		}
    },
	methods: {
        moduleA() {
        	util.$emit('bus', '这是子组件A的值')
    	}
	}
}
</script>

子组件B：

<template>
    <div>
        <div @click="moduleB">按钮</div>
        <div>{{ msg }}</div>
    </div>
</template>

<script>
// 引入中间件
import util from './util.js'
export default {
    nane: "",
    data() {
        return {
            msg: ''
		}
    },
    mounted() {
     	var vm = this
      	// 用$on触发事件并接收参数
      	util.$on('bus', res=> {
	        console.log(res) // 这是子组件A的值
	        vm.msg = res
      	})
    },
	methods: {
        moduleB() {
        	
    	}
	}
}
</script>

END.