最近 做组件封转的时候用到了父子组件之间的数据双向绑定问题，主要应用场景为：
1、在实现一个具有插槽效果的弹出框时，控制弹出框显示的show值变为true 若是直接通过props传给子组件，子组件虽然打开了弹出框，但是子组件关闭弹出框=>即子组件接收父组件的show变为false后，因为组件参数的传递是单向的，父组件的show并没有被变成false，所以导致了弹出框只能被打开一次的情况出现。
这时候，就需要实现父子组件之间的show值的双向绑定才能对弹出框显示关闭的自由控制。
解决示例：
父组件调用<Dialog >子组件：
<div class="dialogBox">
<el-button @click="show = true">openDialog</el-button>
<Dialog :visible.sync='show' width='30%' :buttonsGrounpSwitch="true"></Dialog>
</div>
子组件：
<div v-cloak id="dialog">
<el-dialog :title="title" :visible.sync="show" :width="width" :close-on-click-modal='false' :show-close='false'>
<div>弹出框内容</div>
<div slot="footer" class="dialog-footer">
<div v-if="!buttonsGrounpSwitch">
<el-button v-if="isShowCancel" @click="cancel">{{cancelText}}</el-button>
<el-button type="primary" @click="ack">{{ackText}}</el-button>
</div>
</div>
</el-dialog>
</div>
props:{
visible : {
type : Boolean,
default:false
},
}
data(){
return{
show : false
}
},
watch: {
visible() {
this.show = this.visible;
},
},
methods:{
cancel(){
this.show = false;
//双向绑定show 同步更改父组件的visible值
this.$emit('update:visible',this.show);
},
ack(){
this.show = false;
//双向绑定show 同步更改父组件的visible值
this.$emit('update:visible',this.show);
}
}
父组件中在传show值时在参数名后添加.sync 修饰符，在子组件中的关闭事件中加入this.$emit('update:visible',false);广播false给父级添加了修饰符的参数实现双向绑定。可以在父级使用观察者模式观察子组件关闭后父组件show值是否同步变化。
2、做搜索栏组件时，父组件的一个v-model参数与搜索子组件实现搜索关键字的双向绑定。
示例如下 ：
父组件 ：
<SearchBar v-model="searchKey"></SearchBar>
子组件props使用value接受父组件v-model的搜索关键字：
props:{
value : {
type: String,
required: true
}
}
使用watch观察者模式监听关键字输入的变化：
watch : {
value() {
this.searchKey = this.value;
},
},
methods:{
inputSearch(){
this.$emit('input',this.searchKey);
},
},
将变化的值实时赋值给子组件内部真实的搜索关键字searchKey之后使用 this.$emit('input', this.searchKey);实时调用input事件广播子组件关键字