快捷導(dǎo)航

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

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

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

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

  <div class="flex">
    <a-button @click="openModal">打開(kāi)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>

效果圖

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

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

您可能感興趣的文章: