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>