快捷導(dǎo)航

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

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

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

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

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

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

方案一：使用.sync 修飾符

父組件：

<template>
  <div class="page-xxx">
    //點擊打開新增彈窗
    <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">
    //點擊打開新增彈窗
    <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 ?

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

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

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

您可能感興趣的文章: