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

啊!洞庭湖的君山是多么雄伟壮观啊!就像一个忠诚的卫士守卫着洞庭湖,好让洞庭湖不受风雨的侵扰。一场小雨过后,出现了一道彩虹,就像一座美丽七彩桥。

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

<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父子组件一篇关于模态框状态的绑定方案请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
一篇关于el-table-column的formatter的如何使用及说明

一篇关于ElementUI的el-upload组件二次封装的问题

一篇关于vue组件事件属性穿透详解

一篇关于vue.javascript中如何实现方法内某些代码延时执行

一篇关于引入vue.javascript 文件的知识点总结