vue sync修饰符的使用

父组件代码:

<template>
  <!-- 弹出框 -->
      <depart-dialog
        ref="departDialog"
        :dialog-visible.sync="showDialog"
      />
</template>
<script>
import  departDialog  from  './components/departDialog.vue'
export default {
components: {
    departDialog
  },
data() {
    return {
      showDialog: false, // 控制子组件弹框显示/隐藏状态 (传给子组件)
    }
  },
}
</script>

子组件

<template>

  <div>
    <el-dialog
      :title="部门"
      :visible="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelFn">取 消</el-button>
        <el-button type="primary" @click="enterFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// .sync修饰符
// 使用: 在父级.vue文件内, 使用子组件传入props值 :props变量名.sync="父变量名"
// 作用: 在子组件内, this.$emit('update:props变量名', 值), 就可以直接给外面父变量名重新复制
// 好处: 父级不必再特意的绑定一个事件名和方法名, 然后在写赋值语句
// 问题: 本案例中, 上面:visible.sync="dialogVisible" 直接dialogVisible被el-dialog内部直接赋值了
// 直接导致props变量被修改->爆红
// 解决:
// 1\. 把修改props的代码删掉(前提: 你确保外面不需要这个布尔值使用)
// 2\. 如果你非要修改props变量(来源于外部)
// (1): 看看页面触发的条件, 比如点击让弹窗关闭, 监听点击事件, $emit回传外面事件方法, 让外面修改props的变量(单向数据流)
// (2): 定义data/computed属性, 初始值来自于props, 页面上data/computed, 子组件内, 再维护一个变量
// computed好一点: 内部组件页面修改computed值->set方法->$emit回传给父亲
// commputed取值: 内部页面要使用props的值, 可以computed->get方法中-> 给页面使用props的值
export default {
  props: {
    // 控制弹窗是否出现
    dialogVisible: {
      type: Boolean,
      default: false
    },
  },
  methods: {
    // 弹窗-底部的-取消按钮
    cancelFn() {
      this.$refs.deptForm.resetFields()
      this.$emit('update:dialogVisible', false)
    },
  }
}
</script>