封装全局Bootstrap Vue Modal组件出现prop修改报错该如何解决

报错根因：你直接将父组件传入的show prop绑定到了b-modal的v-model上，b-modal内部会主动修改该绑定值，触发Vue单向数据流校验导致报错。

解决方案 #

核心思路是通过计算属性的get/set做中间层，不直接修改父传prop，通过emit事件同步状态给父组件：

1. 子组件（ModalHelper）修改后的完整代码

<template>
    <b-modal
        v-model="visible"
        size="lg"
        scrollable
        centered
        header-class="event-close-modal-header"
        @show="handleShow"
    >
        <template #modal-title="{}">
            <span class="event-close-modal-header-mc2">{{ title }}</span>
        </template>

        <b-container fluid class="pb-4">
            <h1>Content goes here</h1>
            <slot />
        </b-container>
    </b-modal>
</template>

<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: false,
            required: true,
        },
        title: {
            type: String,
            required: true,
        },
    },
    computed: {
        visible: {
            get() {
                return this.show
            },
            set(val) {
                // 配合父组件的.sync修饰符自动同步状态
                this.$emit('update:show', val)
                // 如果需要父组件监听关闭事件做额外逻辑，可以额外emit close事件
                // this.$emit('close', val)
            }
        }
    },
    methods: {
        handleShow() {
            // 原有show事件的自定义逻辑写在这里即可
        }
    }
};
</script>

2. 父组件调用代码简化（不需要额外监听close事件）

<ModalHelper
  :show.sync="modalOne"
  title="One"
/>

<button @click="modalOne = true">Open Modal One</button>

如果需要在弹窗关闭时执行额外逻辑，保留子组件的close emit后，父组件可以正常监听@close事件即可。

内容的提问来源于stack exchange，提问作者Riza Khan