<!-- 编辑对应角色的对话框 -->
    <el-dialog title="编辑角色" :visible.sync="editDialogVisible" width="35%">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

:visible.sync="editDialogVisible"里面的.sync修饰符是什么作用呢？
答案是：为了在子组件可以变更父组件传过去的值，比如这个editDialogVisible
其原理以 update:myPropName 的模式触发事件
我觉得是个语法糖，
父组件中的:visible.sync="editDialogVisible"相当于
:visible=“editDialogVisible” 加上@update:visible=“editDialogVisible = $event”
在子组件要触发一下这个更新事件，将需要传的值传过来
this.$emit(‘update:show’, false)
下面放例子(模拟了一下UI库的实现)：
父组件：

<template>
  <div>
    <h3>Welcome!</h3>
    <div>
      <el-button @click="isShow = true">显示test组件</el-button>
      <el-button @click="isShow = false">隐藏test组件</el-button>
      <test :show.sync="isShow"></test>
      <test :show="isShow" @update:show="isShow = $event"></test>
    </div>
  </div>
</template>

<script>
import Test from './Test'
export default {
  data() {
    return {
      name: 'lst',
      isShow: false
    }
  },
  components: { Test }
}
</script>

子组件：

<template>
  <div v-show="show">
    <h3>Test</h3>
    <h4>{{ show }}</h4>
    <el-button @click="changeShow">test组件内部控制隐藏</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: ['show'],
  methods: {
    changeShow() {
      this.$emit('update:show', false)
    }
  }
}
</script>