1、使用场景

    当我需要对一个 prop 进行“双向绑定的时候，通常用在封装弹窗组件的时候来进行使用，当然也会有其他的使用场景，只要涉及到父子组件之间需要传参的都可以使用，尽量不要使用watch监听来进行修改值，也不要尝试直接修改props传过来的参数，可以参考官网单向数据流的方式处理。

2、.sync使用方式

• 以下是element封装的dialog弹窗组件，就是使用了.sync修饰符来进行控制是否弹出，我们要在项目中对dialog组件进行一个二次封装，也使用.sync的方式来实现。

• 子组件代码部分
  1、props接收dialogVisible，并赋值给el-dialog组件；
  2、通过点击事件出发emit事件；
  3、通过为 this.$emit(‘update:dialogVisible’,false)，update是固定的，后面的是你需要改变的值，要和你props传过来的值保持一致；
  4、修改后的值会更新到父组件；

// 子组件
<template><div class="hello"><el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="handleClose">取 消</el-button><el-button type="primary" @click="handleConfrim">确 定</el-button></span></el-dialog></div>
</template>
<script>
export default {props: {dialogVisible: {type: Boolean,default: false},},methods: {handleClose(done) {this.$emit('update:dialogVisible',false)},handleConfrim() {this.$emit('update:dialogVisible',false)},change(e) {this.$emit('input', e.data)}}
};
</script>

• 父组件代码部分
  1、初始化一个默认的值，我这里初始化的值为isShow；
  2、:dialogVisible.sync=“isShow” 向子组件传入dialogVisible，.sync修饰符一定要加上，这样子组的emit的update才会起作用；
  3、然后就可以动态修改父组件的值了；

// 父组件
<template><div id="app"><!-- <img alt="Vue logo" src="./assets/logo.png"> --><el-button type="primary" @click="isShow = true">{{ '展示弹窗' }}</el-button><HelloWorld :dialogVisible.sync="isShow"/></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld},data() {return {isShow: false}}
}
</script>