"Расширение" Vue компонента

Question

Итак, есть компонент BModal в комплекте Bootstrap Vue. Конкретно интересует переделка modal-header слота - хочу накинуть на него пару кнопок и в целом немного расширить функционал компонента.

Проблема в том, что надо прокинуть все свойства, события и прочие объекта в сам компонент b-modal. Снова прописывать все эти объекты у себя в компоненте только ради того, чтобы слегка добавить функционала как-то слишком геморно. На просторах интернета наткнулся на пример, по которому пытался решить свою проблему:

<template>
    <b-modal v-bind="$attrs" v-on="$listeners">
        <template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
            <slot :name="name" v-bind="data"></slot>
        </template>
    </b-modal>
</template>

Однако, по какой-то причине это не помогает - все объекты вроде передаются, но реакции никакой нет. По крайней мере, у b-modal есть v-model, которая контролировала видимость модалки, но в этом случае оно просто не работает. Что я делаю не так и как можно решить мою проблему?

Answer 1

Нужно было в свойствах компонента объявить:

model: {
    prop: 'visible',
    event: 'change'
}

И теперь все работает. По умолчанию v-model использует prop value и event input, поэтому свойство видимости не пробрасывалось.

БЛОГ НА HUSL

"Расширение" Vue компонента

Ответы (1 шт):