Как потребовать слот в Vue.js?

Ранее у меня была строка, которая могла содержать HTML (с сервера, а не пользователя), которую я принимал как опору. Проще говоря, это было примерно так.

<foobar alert-content = "<strong>bazboo</strong>">
</foobar>

И я определил опору, чтобы она требовалась вот так

alertContent: {
  type: String, 
  required: true,
},

Я решил, что слот здесь имеет больше смысла, поэтому я начал передавать, что это слот.

<foobar>
    <strong>bazboo</strong>
</foobar>

Со слотом в шаблоне, как и следовало ожидать. И это работает. Но я больше не могу этого требовать.

Как мне потребовать слот в Vue.js?

Какого поведения вы ожидаете, если его нет?

— 04.05.2018 19:36

Такое же поведение, как если бы я не смог пройти требуемый реквизит, было бы идеальным.

— 04.05.2018 19:37

Ха, предоставьте один контент слота по умолчанию, который предупреждает разработчика ...

— 04.05.2018 19:43

javascript vue.js

04.05.2018 19:26

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 433

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не знаю ни одного встроенного способа, который требовал бы слота так же, как опора, но вы можете довольно легко обеспечить ту же функциональность, проверив слот по умолчанию при создании компонента.

Вот пример.

console.clear()

Vue.component("TestComponent",{
  template: `
    <div>
      <slot />
    </div>
  `,
  created(){
    if (!this.$slots.default)
      console.error("TestComponent requires content be provided in the slot.")
  }
})

new Vue({
  el: "#app"
})

<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id = "app">
  <test-component></test-component>
</div>

В качестве альтернативы предоставьте содержимое по умолчанию, которое делает очевидным, что необходимо предоставить слот.

console.clear()

Vue.component("TestComponent",{
  template: `
    <div>
      <slot>
        <h2>Hey dummy, you need to add content to TestComponent</h2>
      </slot>
    </div>
  `,
  created(){
    if (!this.$slots.default)
      console.error("TestComponent requires content be provided in the slot.")
  }
})

new Vue({
  el: "#app"
})

<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id = "app">
  <test-component></test-component>
  <hr>
  <test-component>
    <h3>This one won't show the default content</h3>
  </test-component>
</div>

04.05.2018 19:44

Другие вопросы по теме

Тег заголовка шаблона Vue.js Webpack

Vue js как виджет на другом сайте

Как сделать файлы объявлений для неофициального модуля vue или любых пакетов в этом отношении?

Как получить значение из события emit без директивы v-on?

B-form-input не принимает минимальное количество, как в обычных HTML-вводах

На запрошенном ресурсе отсутствует заголовок Access-Control-Allow-Origin. Origin 'https://myappurl.com поэтому не имеет доступа

Добавить ванильный прослушиватель событий?

Изменить значение, отображаемое в v-слайдере и v-текстовом поле на основе параметра v-select

Добавить обработчик кликов в ссылку?

VueJS - приложение не может найти маршрут

Как потребовать слот в Vue.js?

Ответы 1

Другие вопросы по теме

Похожие вопросы