How to pass parameters to a component via v-model?

Question

Vue.js

I'm trying to make a modal window component like vuetifyjs. But I can't figure out how to bind the props property in the modal window and the parent component.

works if place v-model register input event -

v-bind:modal="modal" @input="modal = arguments[0]"

parent.vue

<template>
    <div>
        <dialogBlock v-model="modal">
            <template slot="activator">
                <a class="gl_link popupForm" @click="modal = true">ОТКРЫТЬ</a>
            </template>
            <div slot="header">
                <div class="modal-header">СЛОТ</div>
            </div>
            <div slot="body">
                СЛОТ
            </div>
        </dialogBlock>
    </div>
</template>

<script>
import dialogBlock from '@/components/modal-global'

export default {
  data() {
        return {
            modal: false,
        };
    },
    components: {
        dialogBlock
    }
};
</script>

modal-global.vue

<template>
    <div>
        <span>
            <slot name="activator">открыть</slot>
        </span>
        <transition name="modal">
            <div class="modal-mask" v-if="modal">
                <div class="modal-wrapper">
                    <div class="modal-container" style="width: 320px">
                        <slot name="header">

                        </slot>
                        <button class="modal-default-button" @click="modalShow(false)"></button>
                        <slot name="body">
                            
                        </slot>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>


<script>
    export default {
        data() {
            return {
            noExitMask: false
            };
        },
        mounted() {

        },
        props: ['modal'],
        methods: {
            modalShow(modal) {
                this.$emit("input", modal);
            },
        }
    };
</script>

Answer 1

The default value parameter name for v-model is "value", not "modal". Replace the parameter name, or customize model to suit your needs.