Как исправить «стандартный рендеринг слотов в формате HTML в компоненте Vue.js» - PullRequest
Новая
       3

Как исправить «стандартный рендеринг слотов в формате HTML в компоненте Vue.js»

0 голосов
/ 19 мая 2019

У меня есть пользовательский компонент ввода, и я пытаюсь использовать slot для передачи другого элемента этому компоненту, но при использовании любого html, например простой кнопки, внутри пользовательских тегов компонента ввода на родительском компоненте, содержимое отображается как необработанный HTML-код (например, экранированный HTML-текст)

Я пытался написать html-код кнопки внутри тега <slot></slot> в пользовательском компоненте ввода, и это нормально работает, но когда передача из родительского компонента прервана!

шаблон пользовательского ввода выглядит так: 

<template>
  <div class="form-group" :class="{ 'ltr ltr-input': ltr }">
    <textarea :id="id" :value="value" @change="input"></textarea>
    <label :for="id">{{ fieldLabel }}</label>
    <slot>
      <button>fallback</button>
    </slot>
  </div>
</template>

на родительском элементе: 

<TextArea id="message" v-model="message" label="message" required>
  <button type="submit">Submit</button>
</TextArea>

Это скриншот с результатом кода выше:

slot

1 Ответ

1 голос
/ 20 мая 2019

Немного более подробного объяснения из моего комментария: вы используете «зарезервированное» слово тега элемента для имени компонента Vue, которое может объяснить странность, с которой вы столкнулись. Из-за нечувствительности к регистру имен тегов HTML, <TextArea> просто анализируется веб-браузером как <textarea> и наследует все поведение рендеринга по умолчанию для этого собственного элемента. Это означает, что любое текстовое содержимое, которое находится между вашими <TextArea> тегами, будет просто отображаться как обычный текст, как если бы оно было в собственном элементе <textarea>.

Чтобы обойти эту проблему, вы всегда должны стремиться называть свои компоненты Vue уникальными: два слова - хорошее начало, поскольку имена тегов HTML пока не содержат двух слов. Таким образом, вы можете переименовать <TextArea> в <custom-textarea> в <v-textarea>, и это будет работать: просто не забудьте обновить имя вашего шаблона.

...