一. 傳統(tǒng)寫法不使用setup語法糖

方式一：通過v-model的方式實(shí)現(xiàn)子組件的顯示與隱藏

1. 父組件的內(nèi)容

<template>
  <div>
    <el-button @click="open">打開</el-button>
    <Child v-model:visible="flag" ></Child>
  </div>
</template>

<script>
  import { ref, watch } from 'vue'
  import Child from "../components/Child.vue"

  export default {
    components: {
      Child
    },

    setup() {
      const flag = ref(false)

      const open = () => {
        flag.value = true
      }
      
      watch(() => flag.value , (val) => {
        console.log("監(jiān)聽flag值得變化:", val)
      })

      return {
        flag,
        open
      }
    }
  }
</script>

2. 子組件內(nèi)容

<template>
  <div class="hello">
    <el-dialog title="提示" v-model="dialogVisble" width="30%" :before-close="close">
      <span>這是一段信息</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="confirm">確 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import { ref, watch } from 'vue'

  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },

    setup(props, ctx) {

      const dialogVisble = ref(false)

      const close = () => {
        ctx.emit("update:visible", false);
      };

      const confirm = () => {
        console.log('你點(diǎn)擊了確定按鈕')
        ctx.emit("update:visible", false);
      }

      watch(() => props.visible, (val) => {
        console.log(props.visible, val);
        dialogVisble.value = val
      });

      return {
        dialogVisble,
        confirm,
        close
      }
    }
  }
</script>

方式二：通過為元素綁定ref的方式實(shí)現(xiàn)子組件的顯示與隱藏

1. 父組件的內(nèi)容

<template>
  <div>
    <el-button @click="open">打開</el-button>
    <Child ref="visibleDialog"></Child>
  </div>
</template>

<script>
  import { ref } from 'vue'
  import Child from "../components/Child.vue"

  export default {
    components: {
      Child
    },

    setup() {
      const visibleDialog = ref(null)

      const open = () => {
        visibleDialog.value.dialogVisble = true
      }

      return {
        visibleDialog,
        open
      }
    }
  }
</script>

2. 子組件內(nèi)容

<template>
  <div class="hello">
    <el-dialog title="提示" v-model="dialogVisble" width="30%" :before-close="close">
      <span>這是一段信息</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="confirm">確 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import { ref } from 'vue'

  export default {

    setup(props, ctx) {

      const dialogVisble = ref(false)

      const confirm = () => {
        console.log('你點(diǎn)擊了確定按鈕')
        dialogVisble.value = false
      }

      const close = () => {
        dialogVisble.value = false
      }

      return {
        dialogVisble,
        confirm,
        close
      }
    }
  }
</script>

2. setup語法糖寫法

1. 父組件

<template>
  <Child :user="user" ref="visiableDialog"></Child>
  <el-button type="primary" @click="openDialog">打開彈窗</el-button>
</template>

<script setup>
import { reactive, ref } from 'vue'
import Child from "../components/childComponents.vue"

const visiableDialog = ref(null)

const user = reactive({
  name: '張三',
  age: 20
})

function openDialog() {
  visiableDialog.value.dialogVisble = true
  console.log(visiableDialog.value.dialogVisble);
}
</script>

2. 子組件

<template>
  <div class="hello">{{ `${props.user.name}在學(xué)習(xí)VUE3` }}</div>
  <el-dialog title="提示" v-model="dialogVisble" width="30%">
    <span>這是一段信息</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="confirm">確 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus'

// 定義控制彈窗顯隱的變量
const dialogVisble = ref(false)

// 接受父組件傳過來的值
// const props = defineProps({
//   user: {
//     type: Object,
//     default: {}
//   }
// })
// 或者
const props = defineProps(['user'])

function confirm() {
  ElMessageBox.confirm('確定關(guān)閉嗎?').then(() => {
    console.log('你點(diǎn)擊了確定按鈕')
    dialogVisble.value = false
  }).catch(() => { })
}

function close() {
  dialogVisble.value = false
}

// 將變量暴露出來
defineExpose({
  dialogVisble
})
</script>

總結(jié)：文章來源地址http://www.zghlxwxcb.cn/news/detail-492109.html

• 對(duì)于傳統(tǒng)寫法兩種方式來看，都有各自的優(yōu)缺點(diǎn)，方式一在寫法上雖然麻煩了些，但是符合vue的設(shè)計(jì)原則，盡量少的操作Dom，以操作數(shù)據(jù)的方式達(dá)到了預(yù)期的目的。
• 而方式二看起來趨向于我們在vue2中的寫法，雖然在寫法上簡便，但是在原理上則是操作了Dom，總之，兩種方式都可以達(dá)到我們想要的結(jié)果，至于使用那種方式看個(gè)人編寫代碼的習(xí)慣吧。
• 對(duì)于使用setup語法糖寫法來看，代碼整體比較整潔，寫起來也相對(duì)方便快捷

到了這里，關(guān)于vue3+element-plus Dialog對(duì)話框的使用 與 setup 寫法的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！