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)容,在文中小編使用的是element-ui V2.2.3。具體解決方法及示例代碼大家參考下本文2018-08-08vue實現(xiàn)進入某個頁面后替換地址欄路徑的操作方法
vue頁面在實際開發(fā)中,經(jīng)常會遇到改變url參數(shù),重新加載頁面數(shù)據(jù)的需求,但是只改變頁面url并不會觸發(fā)組件的生命周期,這就需要用其他方法來實現(xiàn)了,本文重點介紹vue實現(xiàn)進入某個頁面后替換地址欄路徑的操作方法,感興趣的朋友跟隨小編一起看看吧2024-04-04vue中實現(xiàn)methods一個方法調(diào)用另外一個方法
下面小編就為大家分享一篇vue中實現(xiàn)methods一個方法調(diào)用另外一個方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02vue如何基于el-table實現(xiàn)多頁多選及翻頁回顯過程
在最近的一個項目中我需要實現(xiàn)表格的翻頁,并且還要實現(xiàn)全選、多選功能,下面這篇文章主要給大家介紹了關于vue如何基于el-table實現(xiàn)多頁多選及翻頁回顯過程的相關資料,需要的朋友可以參考下2022-12-12