Включить компонент из родительского приложения в компонент, содержащийся в каталоге node_modules - PullRequest
0 голосов
/ 14 декабря 2018

Я работаю над приложением 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.Каков наилучший способ сделать это?В наблюдателя или компьютерная собственность, возможно?Или по-другому?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...