Question

我正在开发包含Vue Bootstrap Calendar的Vue应用程序，我希望能够覆盖day单元格的内容（由Day.vue component处理）以在其中添加自己的自定义内容。我最初的想法是修改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的{{1}}部分中添加了此组件：

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。最好的方法是什么？可能是在观察者或计算机财产中？还是另一种方式？

将来自父应用程序的组件包含在node_modules目录

0 个答案: