本文总结针对不同场景下，vue组件间通信方式。
vue通信方式主要分：
第一种：父子间直接通信
1、父向子组件传递数据 prop属性 和refs
2、子向父组件传递数据，通过$emit触发自定义事件，通知父级
Tips：
props里面的值在子组件里是只能读，不能写，若要写须通过$emit
自定义事件：on或者$on 定义事件，$emit触发事件
refs存在强耦合
**3、父子双向绑定**
1、通过sync属性
2、通过v-model
演示:
parent.vue<template>
<div class="home">
<div>
<h3>父子数据双向绑定</h3>
<h4>方案一:</h4>
<button @click="showModal">点击显示弹出框</button>
<modal v-show="isShow" ok-value="隐藏弹出框" :appShow.sync = "isShow"></modal>
<h4>方案二:</h4>
<button @click="showModal" :style="{color:color}">注意按钮颜色</button>
<modal ok-value="改变按钮颜色" v-model="color"></modal>
</div>
</div>
</template>
<script>
import modal from "./modal.vue";
export default {
name: "home",
components: {
modal
},
data() {
return {
isShow:false,
color:"black"
};
},
computed: {
},
methods: {
showModal(){
this.isShow = true
}
}
};
</script>
<style>
h3,h4{text-align: left;}
h4{text-indent: 2em}
</style>
modal.vue
<template>
<div class="modal-example">
<div class="modal">
<div class="modal-header">
<h4>{{title}}</h4>
</div>
<div class="modal-content">
<div>
在这里添加内容
</div>
</div>
<div class="modal-footer">
<input class="btn" type="button" :value="okValue" @click="okClick" />
<input class="btn" type="button" value="取消" />
</div>
</div>
</div>
</template>
<script>
export default {
//props:['title','okValue']
props:{
title:{
type: String,
default: '这是一个标题'
},
okValue: {
type: String,
default: '确定'
},
appShow: { // 注意这里
type: Boolean,
default: false
},
value:{
type:String,
default:"black"
}
},
methods:{
okClick(){
console.log('点击了ok按钮')
this.$emit('ok-click');
// 改变同步的某个属性值，app-show.sync
this.$emit('update:appShow',false)// 注意这里
//this.$emit('update:isRed',true)
this.$emit('input','red')
}
}
}
</script>
<style scoped>
p,h4{
margin:0;
}
.modal{
width: 500px;
background-color: #fff;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
box-shadow: 0 3px 9px rgba(0,0,0,.5);
-position: absolute;
left: 50%;
top: 50%;
-transform: translate(-50%,-50%);
z-index: 111;
}
.modal-header {
padding: 15px;
border-bottom: 1px solid #e5e5e5;
}
.modal-content div {
padding: 20px;
}
.modal-footer {
padding: 15px;
text-align: right;
border-top: 1px solid #e5e5e5;
}
.btn {
padding: 5px 15px;
}
</style>
4、隔代传递（provide / inject ）：只能向下传递
第二种：不相关组件通信
1、总线$bus
2、Vuex
第三种：兄弟间组件通信
1、子 => 父 => 子
2、总线$bus
3、Vuex
