vue2 + element + Nuxt 双向邦定弹框

使用：:visible.sync双向绑定

:visible 属性绑定

.sync vue双向绑定

1：子组件

  :visible="dialogVisible"

2：通知父组件更新属性

双向通知

this.$emit('update:dialogVisible', false)

3：父组件使用

通过.sync更新状态

<v-friendship :dialog-visible.sync="dialogVisible"></v-friendship>

4：案例：

<template>
  <el-dialog
    :visible="dialogVisible"
    title="温馨提示"
    width="30%"
    center
    :before-close="handleClose"
  >
    <div class="dialog-wrap">
      <div class="dialog-main">
        协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议
      </div>
      <el-checkbox class="dialog-footer">
        已阅读并同意 <a href="/agreement" target="_blank" class="link">用户协议</a> 和
        <a href="/privacyPolicy" target="_blank" class="link">隐私政策</a>
      </el-checkbox>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      // 弹框
      type: Boolean,
      value: true,
    },
  },
  data() {
    return {}
  },

  fetchOnServer: false,
  methods: {
    /**
     * @decsription 弹框右上角×号处理
     */
    handleClose() {
      console.log(11111)
      this.$emit('update:dialogVisible', false)
      // this.$emit('update:show', false)
    },
  },
}
</script>