详解vue父子组件关于模态框状态的绑定方案

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了详解vue父子组件关于模态框状态的绑定方案，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1944字，纯文字阅读大概需要3分钟。

内容图文

日常开发中经常遇到的一个场景，父组件有很多操作，需要弹窗，例如：

<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>

如何实现子组件和父组件模态框状态的同步

方案一：使用.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 ?

对于上面的两种方案，子组件内部还可以使用计算属性的写法

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的详解vue父子组件关于模态框状态的绑定方案全部内容，希望文章能够帮你解决详解vue父子组件关于模态框状态的绑定方案所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---