快捷導(dǎo)航

詳解vue父子組件關(guān)于模態(tài)框狀態(tài)的綁定方案

更新時(shí)間：2019年06月05日 14:23:03 作者：Jaywin

這篇文章主要介紹了詳解vue父子組件關(guān)于模態(tài)框狀態(tài)的綁定方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

日常開(kāi)發(fā)中經(jīng)常遇到的一個(gè)場(chǎng)景，父組件有很多操作，需要彈窗，例如：

<template>
  <div class="page-xxx">
    //點(diǎn)擊打開(kāi)新增彈窗
    <button>新增</button>
    //點(diǎn)擊打開(kāi)編輯彈窗
    <button>編輯</button>
    //點(diǎn)擊打開(kāi)詳情彈窗
    <button>詳情</button>
    <Add :showAdd="false"></Add>
    <Edit :showEdit="false"></Edit>
    <Detail :showDetail="false"></Detail>
  </div>
</template>

子組件：

<div class="page-add">
  <el-dialog :visible="dialogVisible" @close="handleClose"></el-dialog>
</div>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    handleClose(val) {
      this.dialogVisible= false
    },
  },
}
</script>

如何實(shí)現(xiàn)子組件和父組件模態(tài)框狀態(tài)的同步

方案一：使用.sync 修飾符

父組件：

<template>
  <div class="page-xxx">
    //點(diǎn)擊打開(kāi)新增彈窗
    <button @click="show = true">新增</button>
    <Add :show.sync="show"></Add>
  </div>
</template>

子組件：

<div class="page-add">
  <el-dialog:visible="dialogVisible" @close="handleClose"></el-dialog>
</div>
<script>
export default {
  props: {
    show: {
      type: Boolean
    }
  },
  watch: {
    show(value) {
      this.dialogVisible= value
    }
  },
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    handleClose(val) {
      this.$emit('update:show', false);
    },
  },
}
</script>

方案二：使用v-model

父組件：

<template>
  <div class="page-xxx">
    //點(diǎn)擊打開(kāi)新增彈窗
    <button @click="show = true">新增</button>
    <Add v-model="show"></Add>
  </div>
</template>

子組件：

<div class="page-add">
  <el-dialog :visible="dialogVisible" @close="handleClose"></el-dialog>
</div>
<script>
export default {
  props: {
    show: {
      type: Boolean
    }
  },
  watch: {
    show(value) {
      this.dialogVisible= value
    }
  },
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    handleClose(val) {
      this.$emit('input', false)
    },
  },
}
</script>

computed OR watch ?

對(duì)于上面的兩種方案，子組件內(nèi)部還可以使用計(jì)算屬性的寫法

computed
export default {
  props: {
    show: {
      type: Boolean
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(value) {
        return this.$emit('input', value)
      },
    },
  },
  methods: {
    handleClose(val) {},
  },
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue+echarts實(shí)現(xiàn)進(jìn)度條式柱狀圖
這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)進(jìn)度條式柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
Vue3.2中setup語(yǔ)法糖的使用教程分享
這篇文章主要為大家詳細(xì)介紹了Vue3.2中setup語(yǔ)法糖的具體使用方法，文中的示例代碼講解詳細(xì)，對(duì)我們深入了解Vue有一定的幫助，需要的可以參考一下
2023-05-05
簡(jiǎn)單實(shí)現(xiàn)Vue的observer和watcher
這篇文章主要教大家如何簡(jiǎn)單實(shí)現(xiàn)Vue的observer和watcher，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
vue3.0響應(yīng)式函數(shù)原理詳細(xì)
這篇文章主要介紹了vue3.0響應(yīng)式函數(shù)原理，Vue3的響應(yīng)式系統(tǒng)可以監(jiān)聽(tīng)動(dòng)態(tài)添加的屬性還可以監(jiān)聽(tīng)屬性的刪除操作，以及數(shù)組的索引以及l(fā)ength屬性的修改操作。另外Vue3的響應(yīng)式系統(tǒng)還可以作為模塊單獨(dú)使用。下面更多介紹，需要的小伙伴可以才可以參考一下
2022-02-02
Vue中使用vue-i18插件實(shí)現(xiàn)多語(yǔ)言切換功能
在基于vue-cli項(xiàng)目開(kāi)發(fā)過(guò)程中，多語(yǔ)言切換功能可使用vue-i18插件，這篇文章分步驟給大家介紹了Vue中使用vue-i18插件實(shí)現(xiàn)多語(yǔ)言切換功能，感興趣的朋友一起看看吧
2018-04-04
vue中的事件加判斷條件如何進(jìn)行選擇性點(diǎn)擊
這篇文章主要介紹了vue中的事件加判斷條件如何進(jìn)行選擇性點(diǎn)擊方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue如何實(shí)現(xiàn)打包資源按時(shí)間戳方式
這篇文章主要介紹了Vue如何實(shí)現(xiàn)打包資源按時(shí)間戳方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-05-05
vue elementUI 上傳非空驗(yàn)證示例代碼
這篇文章主要介紹了vue elementUI 上傳非空驗(yàn)證,原理就是寫一個(gè)假的紅色*號(hào),每次點(diǎn)擊查看的時(shí)候執(zhí)this.rules.staffImg[0].required = false,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
2023-12-12
淺談在vue中用webpack打包之后運(yùn)行文件的問(wèn)題以及相關(guān)配置方法
下面小編就為大家分享一篇淺談在vue中用webpack打包之后運(yùn)行文件的問(wèn)題以及相關(guān)配置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
淺談Vue數(shù)據(jù)綁定的原理
本篇文章主要介紹了淺談Vue數(shù)據(jù)綁定的原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01