日常開發中經常遇到的一個場景，父組件有很多操作，需要彈窗，例如：
<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>對于上面的兩種方案，子組件內部還可以使用計算屬性的寫法
computedexport default { props: { show: { type: Boolean } }, computed: { dialogVisible: { get() { return this.show }, set(value) { return this.$emit('input', value) }, }, }, methods: { handleClose(val) {}, },}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
