vue利用sync語法糖實(shí)現(xiàn)modal彈框的項(xiàng)目實(shí)踐

更新時(shí)間：2022年07月26日 09:23:49 作者：個人前端知識隨筆

本文主要介紹了vue利用sync語法糖實(shí)現(xiàn)modal彈框的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

用過vue的開發(fā)者都知道vue是組件化開發(fā)的一個框架，基于組件化的原則，很多時(shí)候我們開發(fā)的時(shí)候都會把像modal、drawer這種彈框，抽屜類的組件作為一個單獨(dú)的組件分出去，然后在在用到的頁面引入進(jìn)來這個時(shí)候就涉及到了visible 屬性的父子組件的通信，我們常規(guī)的做法可以通過props,$emit的方式進(jìn)行通信，但vue其實(shí)提供了一種更為優(yōu)雅的實(shí)現(xiàn)方式，可以通過sync的語法糖來實(shí)現(xiàn)。具體代碼如下父組件代碼

  <div class="flex">
    <a-button @click="openModal">打開Modal彈框</a-button>
    <DemoModal :visible.sync="visible" />
  </div>
</template>

<script>
import DemoModal from './demoModal.vue'
export default {
  components: {
    DemoModal,
  },
  data() {
    return {
      visible: false,
    }
  },
  methods: {
    openModal() {
      this.visible = 'true'
    },
  },
}
</script>
<style >
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

子組件代碼

  <a-modal
    title="彈框"
    :visible="visible"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
  </a-modal>
</template>

<script>

export default {
 name:"DemoModal",
 props:{
  visible:{
    type:Boolean,
    default:false
  }
 },
 methods:{
  handleCancel(){
    this.$emit("update:visible",false)
  }
 }
}
</script>

效果圖

下面簡單說一下sync語法糖的原理其實(shí)原理也是基于props emit，只不過語法糖會幫我們做一些事，父組件里:visible.sync="visible"會被擴(kuò)展成:visible=""visible@upate:visible="value−>visible=value"其中value是子組件傳過來的參數(shù)，這也就是為什么子組件關(guān)閉的時(shí)候要用這個寫法this.emit("update:visible",false) 通過語法糖來實(shí)現(xiàn)modal彈框，可以讓我們的代碼更為簡潔更為優(yōu)雅，其用法在drawer里也是一樣的這里就不一一闡述了

到此這篇關(guān)于vue利用sync語法糖實(shí)現(xiàn)modal彈框的項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)vue modal彈框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

在vue.config.js中優(yōu)化webpack配置的方法
在日常開發(fā)中我們離不開打包工具webpack,但是不同的配置會影響我們項(xiàng)目的運(yùn)行構(gòu)建時(shí)間,也會影響打包之后項(xiàng)目包的大小,這篇文章記錄一下我使用過的可以優(yōu)化webpack的配置,需要的朋友可以參考下
2024-05-05
關(guān)于vue2響應(yīng)式缺陷的問題
這篇文章主要介紹了關(guān)于vue2響應(yīng)式缺陷的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
webpack+vue.js實(shí)現(xiàn)組件化詳解
vue的開發(fā)體驗(yàn)還是比較愉悅的。首先文檔非常友好，所以上手會比較快。其次，配合webpack和vue-loader，每個頁面都是一個.vue文件，寫起來很方便。所以很適合做組件化開發(fā)，這篇文章我們就來一起看看webpack+vue.js如何實(shí)現(xiàn)組件化。
2016-10-10
Vue路由對象屬性 .meta $route.matched詳解
今天小編就為大家分享一篇Vue路由對象屬性 .meta $route.matched詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue實(shí)現(xiàn)商品加減計(jì)算總價(jià)的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)商品加減計(jì)算總價(jià)的實(shí)例代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-08-08
Vue.js中v-model指令的用法介紹
這篇文章介紹了Vue.js中v-model指令的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-03-03
vue3.x 使用jsplumb實(shí)現(xiàn)拖拽連線
這篇文章主要為大家詳細(xì)介紹了vue3.x 使用jsplumb實(shí)現(xiàn)拖拽連線，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue實(shí)現(xiàn)多條件篩選超簡潔代碼
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)多條件篩選的相關(guān)資料,隨著數(shù)據(jù)的不斷增多,我們往往需要在表格中進(jìn)行多條件的篩選,以便快速定位符合我們需求的數(shù)據(jù),需要的朋友可以參考下
2023-09-09
Vue3+X6流程圖實(shí)現(xiàn)數(shù)據(jù)雙向綁定詳解
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合X6流程圖實(shí)現(xiàn)數(shù)據(jù)雙向綁定,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-03-03
vue3?setup語法糖各種語法新特性的使用方法(vue3+vite+pinia)
這篇文章主要介紹了vue3?setup語法糖各種語法新特性的使用(vue3+vite+pinia),本文主要是記錄vue3的setup語法糖的各種新語法的使用方法,需要的朋友可以參考下
2022-09-09