欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3+element-plus?Dialog對話框的使用與setup?寫法的用法

 更新時間:2023年04月23日 10:49:57   作者:前端-阿輝  
這篇文章主要介紹了vue3+element-plus?Dialog對話框的使用?與?setup?寫法的使用,本文通過兩種方式結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

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

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

父組件的內(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>

子組件內(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('你點擊了確定按鈕')
        ctx.emit("update:visible", false);
      }

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

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

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

父組件的內(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>

子組件內(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('你點擊了確定按鈕')
        dialogVisble.value = false
      }

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

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

2. setup語法糖寫法 父組件

<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>

子組件

<template>
  <div class="hello">{{ `${props.user.name}在學習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('確定關閉嗎?').then(() => {
    console.log('你點擊了確定按鈕')
    dialogVisble.value = false
  }).catch(() => { })
}

function close() {
  dialogVisble.value = false
}

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

總結:

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

到此這篇關于vue3+element-plus Dialog對話框的使用與setup 寫法的用法的文章就介紹到這了,更多相關vue3 element-plus Dialog對話框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • vue2.0 element-ui中el-select選擇器無法顯示選中的內(nèi)容(解決方法)

    vue2.0 element-ui中el-select選擇器無法顯示選中的內(nèi)容(解決方法)

    這篇文章主要介紹了vue2.0 element-ui中的el-select選擇器無法顯示選中的內(nèi)容,在文中小編使用的是element-ui V2.2.3。具體解決方法及示例代碼大家參考下本文
    2018-08-08
  • vue項目環(huán)境變量配置的實現(xiàn)方法

    vue項目環(huán)境變量配置的實現(xiàn)方法

    這篇文章主要介紹了vue項目環(huán)境變量配置的實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-10
  • vue組件傳值的實現(xiàn)方式小結【三種方式】

    vue組件傳值的實現(xiàn)方式小結【三種方式】

    這篇文章主要介紹了vue組件傳值的實現(xiàn)方式,結合實例形式總結分析了vue.js組建傳值的三種實現(xiàn)方式,包括父傳子、子傳父及非父子傳值,需要的朋友可以參考下
    2020-02-02
  • vue中4個自定義指令講解及實例用法

    vue中4個自定義指令講解及實例用法

    在本篇文章里小編給大家整理了一篇關于vue中4個自定義指令講解及實例用法,有興趣的朋友們可以跟著學習下。
    2021-12-12
  • vue實現(xiàn)進入某個頁面后替換地址欄路徑的操作方法

    vue實現(xiàn)進入某個頁面后替換地址欄路徑的操作方法

    vue頁面在實際開發(fā)中,經(jīng)常會遇到改變url參數(shù),重新加載頁面數(shù)據(jù)的需求,但是只改變頁面url并不會觸發(fā)組件的生命周期,這就需要用其他方法來實現(xiàn)了,本文重點介紹vue實現(xiàn)進入某個頁面后替換地址欄路徑的操作方法,感興趣的朋友跟隨小編一起看看吧
    2024-04-04
  • vue中實現(xiàn)methods一個方法調(diào)用另外一個方法

    vue中實現(xiàn)methods一個方法調(diào)用另外一個方法

    下面小編就為大家分享一篇vue中實現(xiàn)methods一個方法調(diào)用另外一個方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • 簡述vue-cli中chainWebpack的使用方法

    簡述vue-cli中chainWebpack的使用方法

    今天就主要來講一下在vue.config.js中對一些配置的更改,簡單介紹一下loader的使用;用configureWebpack簡單的配置;用chainWebpack做高級配置;包括對loader的添加,修改;以及插件的配置,需要的朋友可以參考下
    2019-07-07
  • vue3手動刪除keepAlive緩存的方法

    vue3手動刪除keepAlive緩存的方法

    當我們未設置keepAlive的最大緩存數(shù)時,當緩存組件太多,會導致內(nèi)存溢出,本文給大家介紹了vue3手動刪除keepAlive緩存的方法,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下
    2024-03-03
  • vue如何基于el-table實現(xiàn)多頁多選及翻頁回顯過程

    vue如何基于el-table實現(xiàn)多頁多選及翻頁回顯過程

    在最近的一個項目中我需要實現(xiàn)表格的翻頁,并且還要實現(xiàn)全選、多選功能,下面這篇文章主要給大家介紹了關于vue如何基于el-table實現(xiàn)多頁多選及翻頁回顯過程的相關資料,需要的朋友可以參考下
    2022-12-12
  • Vue3在Setup中使用axios請求獲取的值方式

    Vue3在Setup中使用axios請求獲取的值方式

    這篇文章主要介紹了Vue3在Setup中使用axios請求獲取的值方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06

最新評論