Я работаю над приложением Vue, которое включает Календарь Vue Bootstrap , и я хотел бы иметь возможность переопределить содержимое ячейки дня (обрабатывается компонентом Day.vue ) добавить свой собственный контент внутри.Сначала я хотел изменить компонент Day, включив в него теги <slot></slot>
и передать таким образом пользовательский контент.
Проблема связана с доступом к компоненту Day
.Чтобы включить календарь в свое приложение, вы включаете компонент Calendar.vue
, который включает Week.vue
, который, в свою очередь, включает Day.vue
.Как я понимаю, слоты, я должен включить дочерний компонент (в данном случае Day.vue
) в компонент, куда я передаю данные, что означает, что его нужно будет включить в мой собственный компонент.
Если это невозможно, моя другая мысль, возможно, состоит в том, чтобы, возможно, изменить библиотеку, добавив другую опору конфигурации (что-то вроде dayCustomContent
) к Calendar.vue
, которая указывает, что содержимое ячейки Day является пользовательским содержимым, передайте это в Calendar.vue
, а затем вплоть до Day.vue
, а затем в шаблоне Day.vue
имеется условное условие v-if
на основе этого реквизита, которое отображает либо пользовательское содержимое, либо содержимое ячейки по умолчанию, что-то вроде:
<template>
<div class="day-cell" v-if="dayCustomContent">
...my custom content here...
</div>
<div class="day-cell" v-else>
...default events from my.events goes here...
</div>
</template>
Тогда мне, вероятно, потребуется определить пользовательский компонент для отображения любого пользовательского содержимого, которое я хочу отобразить, и каким-то образом включить этот компонент в Day.vue
.
Итак, подведем итог: у меня следующие вопросы: 1) Есть ли способ сделать то, что мне нужно со слотами?2) По второму варианту я иду по правильному пути?Я открыт для предложений.
ОБНОВЛЕНИЕ: Мне удалось это сделать, добавив логическую customDayContent
опору в Calendar.vue
примерно так и передав ее до Week.vue
и затем к Day.vue
:
<template>
...
<div class="dates" ref="dates">
<Week
v-for="(week, index) in Weeks"
:firstDay="firstDay"
:key="week + index"
:week="week"
:canAddEvent="canAddEvent"
:canDeleteEvent="canDeleteEvent"
:customDayContent="customDayContent"
:displayWeekNumber="displayWeekNumber"
@eventAdded="eventAdded"
@eventDeleted="eventDeleted"
></Week>
</div>
...
</template>
<script>
export default {
...
props: {
...
customDayContent: {
type: Boolean,
default: false
}
},
}
</script>
, а затем в Day.vue
, сделайте то, что я предложил с v-if
:
<template>
<div class="day-cell" v-if="customDayContent">
<custom-day></custom-day>
</div>
<div
class="day-cell"
:class="{'today' : day.isToday, 'current-month' : day.isCurrentMonth, 'weekend': day.isWeekEnd, 'selected-day':isDaySelected}"
@click="showDayOptions"
v-else
>
... existing code goes here...
</div>
</template>
Последняя часть ссылается на CustomDay.vue
компонент, указанный в моем блоке v-if
.Я хочу, чтобы пользователь мог определять содержимое своего собственного пользовательского шаблона CustomDay.vue
в своем родительском приложении.Тем не менее, у меня возникают проблемы, пытаясь понять, как это сделать.Следуя схеме включения компонентов уже в этот компонент, я добавил это в components
раздел Day.vue
:
CustomDay: require("../../../../src/Components/CustomDay.vue").default
? require("../../../../src/Components/CustomDay.vue").default
: require("../../../../src/Components/CustomDay.vue")
Однако, что бы я ни делал, я получаю сообщение об ошибке, чтоthe relative module was not found.
Кроме того, мне нужно добавить его в массив components
, только если customDayContent
равно true
.Каков наилучший способ сделать это?В наблюдателя или компьютерная собственность, возможно?Или по-другому?