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

来源：动视网责编：小采时间：2020-11-27 21:55:37

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

详解vue父子组件关于模态框状态的绑定方案:日常开发中经常遇到的一个场景，父组件有很多操作，需要弹窗，例如： <template> <div class=page-xxx> //点击打开新增弹窗 <button>新增</button> //点击打开编辑弹窗 <button>编辑</butt

推荐度：

点击下载本文 文档为doc格式

导读详解vue父子组件关于模态框状态的绑定方案:日常开发中经常遇到的一个场景，父组件有很多操作，需要弹窗，例如： <template> <div class=page-xxx> //点击打开新增弹窗 <button>新增</button> //点击打开编辑弹窗 <button>编辑</butt

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

<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父子组件关于模态框状态的绑定方案

推荐度：

点击下载本文 文档为doc格式

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

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐