有关dialog组件封装的visiable传值的两种方式

组件使用

dialog组件本身使用的.sync进行visiable的传值，这样用户在点击右上角叉号的时候就不用父组件修改visiable的值，组件内部会调用this.$emit("update:visible", false)去修改父组件中的visiable值来关闭弹框，

组件封装

去除.sync

我们在封装组件的时候可以将.sync去除，但是这样我们在点击右上角叉号的时候就无法关闭，所以就需要自己修改visiable值控制显示或者隐藏，点击右上角叉号会触发close函数可以给el-dialog绑定一个close事件 @close="close"，在触发的时候自己调用 this.$emit("update:visible", false);，因为子组件不能将props进行修改。

    <el-dialog
        :visible="visible"
        title="文件导入"
        width="480px"
        align-center
        :close-on-click-modal="false"
        @close="close"
    >
      <template #footer>
            <el-button size="mini" @click="close">取 消</el-button>
            <el-button size="mini" type="primary" @click="submitForm"
                >确 定</el-button
            >
        </template>
    </el-dialog>

        close() {
            // this.type = "password";
            this.$emit("update:visible", false);
        },

保留.sync

那么值就要在封装的对话框组件中传，但是值还必须由父组件决定，所以父组件还是要把值传给父组件，但是可以在封装的组件中可以定义一个计算属性去监视props，当对话框组件内部修改了计算属性的值会被监听到，此时去更新父组件中的值即可，这样visible变了_dialogFormVisible:也会变化。

 <el-dialog
      title=""
      :modal-append-to-body="false"
      :visible.sync="_visible"
      :close-on-click-modal="false"
      width="480px"
      @submit.native.prevent
    >
      <template #footer>
            <el-button size="mini" @click="_visible=false">取 消</el-button>
            <el-button size="mini" type="primary" @click="submitForm"
                >确 定</el-button
            >
        </template>
    </el-dialog>

 _visible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:dialog-form-visible', val)
      }
    }