蝙蝠岛资源网 Design By www.hbtsch.com

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

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

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父子组件模态框

蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

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

暂无详解vue父子组件关于模态框状态的绑定方案的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。