Include component from parent app in component con

问题:

I am working on Vue app that incorporates Vue Bootstrap Calendar, and I would like to be able to override the content of the day cell (handled by the Day.vue component) to add my own custom content inside. My thought was initially to modify the Day component to include <slot></slot> tags and pass in the custom content that way.

The problem has to do with accessing the Day component. To include the calendar in your app, you include the Calendar.vue component, which includes Week.vue, which in turn includes Day.vue. As I understand slots, I have to have the child component (Day.vue in this case) included in the component where I'm passing the data, which means it would need to be included in my own component.

If this is not possible, my other thought is to perhaps modify the library by adding another configuration prop (something like dayCustomContent) to the Calendar.vue that indicates that the Day cell content is custom content, pass that in to Calendar.vue, and then down to Day.vue, and then in the Day.vue template, have a v-if conditional based on this prop that either displays the custom content or the default cell content, something like:

<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>

I would probably then need to define a custom component to render whatever custom content I want to display, and somehow include that component within Day.vue.

So to sum up, my questions are these: 1) Is there a way to do what I need with slots? 2) For my second option, am I going down the right path? I'm open to suggestions.

UPDATE: I was able to get this done by adding a boolean customDayContent prop in Calendar.vue like so and passing it down to Week.vue and then to 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>

and then in Day.vue, do like I had suggested with 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>

The last part is referencing the CustomDay.vue component referenced in my v-if block. I want the user to be able to define the content of their own custom CustomDay.vue template in their own parent app. However, I'm having trouble trying to figure out how to do that. Following the pattern of including components already in this component, I added this in the components section of Day.vue:

CustomDay: require("../../../../src/Components/CustomDay.vue").default
  ? require("../../../../src/Components/CustomDay.vue").default
  : require("../../../../src/Components/CustomDay.vue")

However, no matter what I try along these lines, I get an error that the relative module was not found. On top of that, I need to add it to the componentsarray only if customDayContent is true. What is the best way to do that? In a watcher or computer property, perhaps? Or another way?