快捷導(dǎo)航

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

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

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

用過vue的開發(fā)者都知道vue是組件化開發(fā)的一個框架，基于組件化的原則，很多時候我們開發(fā)的時候都會把像modal、drawer這種彈框，抽屜類的組件作為一個單獨的組件分出去，然后在在用到的頁面引入進來這個時候就涉及到了visible 屬性的父子組件的通信，我們常規(guī)的做法可以通過props,$emit的方式進行通信，但vue其實提供了一種更為優(yōu)雅的實現(xiàn)方式，可以通過sync的語法糖來實現(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語法糖的原理其實原理也是基于props emit，只不過語法糖會幫我們做一些事，父組件里:visible.sync="visible"會被擴展成:visible=""visible@upate:visible="value−>visible=value"其中value是子組件傳過來的參數(shù)，這也就是為什么子組件關(guān)閉的時候要用這個寫法this.emit("update:visible",false) 通過語法糖來實現(xiàn)modal彈框，可以讓我們的代碼更為簡潔更為優(yōu)雅，其用法在drawer里也是一樣的這里就不一一闡述了

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

您可能感興趣的文章: