詳解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)看看吧

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

<template>
  <div class="page-xxx">
    //點(diǎn)擊打開新增彈窗
    <button>新增</button>
    //點(diǎn)擊打開編輯彈窗
    <button>編輯</button>
    //點(diǎn)擊打開詳情彈窗
    <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)擊打開新增彈窗
    <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)擊打開新增彈窗
    <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)文章

關(guān)于頁(yè)面刷新vuex數(shù)據(jù)消失問(wèn)題解決方案
本篇文章主要介紹了關(guān)于頁(yè)面刷新vuex數(shù)據(jù)消失問(wèn)題解決方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
element table列表根據(jù)數(shù)據(jù)設(shè)置背景色
在使用elementui中的el-table時(shí),需要將表的背景色和字體顏色設(shè)置為新顏色,本文就來(lái)介紹一下element table列表根據(jù)數(shù)據(jù)設(shè)置背景色,感興趣的可以了解一下
2023-08-08
Vue項(xiàng)目中quill-editor帶樣式編輯器的使用方法
這篇文章主要介紹了Vue項(xiàng)目中quill-editor帶樣式編輯器的使用方法，可以更改插入圖片和視頻，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
Vue如何配置根目錄@(引用路徑)
這篇文章主要介紹了Vue如何配置根目錄@(引用路徑)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue+element-ui動(dòng)態(tài)生成多級(jí)表頭的方法
今天小編就為大家分享一篇vue+element-ui動(dòng)態(tài)生成多級(jí)表頭的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
詳解為什么Vue中的v-if和v-for不建議一起用
這篇文章主要介紹了面試官：為什么Vue中的v-if和v-for不建議一起用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
vue.config.js中配置configureWebpack和chainWebpack以及一些常用的配置
configureWebpack和chainWebpack都是Vue CLI中用于修改Webpack配置的工具,configureWebpack可以通過(guò)對(duì)象或函數(shù)修改配置,簡(jiǎn)單直接；chainWebpack則使用WebpackChainAPI,適合復(fù)雜配置,兩者可以結(jié)合使用,以達(dá)到更精細(xì)的配置需求,幫助開發(fā)者優(yōu)化項(xiàng)目構(gòu)建
2024-10-10
關(guān)于Vue?監(jiān)控?cái)?shù)組的問(wèn)題
這篇文章主要介紹了Vue?監(jiān)控?cái)?shù)組的示例,主要包括Vue?是如何追蹤數(shù)據(jù)發(fā)生變化，Vue?如何更新數(shù)組以及為什么有些數(shù)組的數(shù)據(jù)變更不能被?Vue?監(jiān)測(cè)到，對(duì)vue監(jiān)控?cái)?shù)組知識(shí)是面試比較常見的問(wèn)題，感興趣的朋友一起看看吧
2022-05-05
vue如何設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點(diǎn)后兩位,并且不能輸入減號(hào)
這篇文章主要介紹了vue如何設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點(diǎn)后兩位,并且不能輸入減號(hào)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-05-05
關(guān)于TypeScript的踩坑記錄
這篇文章主要介紹了關(guān)于TypeScript的踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09