Блог

Компонент, который я пытаюсь использовать, написан на языке Vue2 и устанавливается через NPM в качестве веб-компонента. Мой новый проект создан в Vue3.

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

Когда я пытаюсь выполнить следующее, я не получаю ошибок, но внутри слотов веб-компонента ничего не отображается:

 <my-webcomponent-with-two-slots>
  <main>
    <div>Hello World</div>
  </main>
  <sidebar>
    <div>Hello World</div>
  </sidebar>
</my-webcomponent-with-two-slots>
 

Когда я пытаюсь сделать следующее, я получаю ошибку: error 'slot' attributes are deprecated vue/no-deprecated-slot-attribute

 <my-webcomponent-with-two-slots>
  <div slot="main">
    <div>Hello World</div>
  </div>
  <div slot="sidebar">
    <div>Hello World</div>
  </div>
</my-webcomponent-with-two-slots>
 

Я не могу изменить или обновить веб-компонент, который я хочу использовать. Как мне использовать его в моем проекте Vue3?

ПРАВКА: Я должен уточнить, что веб-компонент работает с использованием более старого проекта, написанного на языке Vue2, используя второй пример.

Vue жалуется на более старый slot атрибут, на который был изменен v-slot . Но вы не используете слоты vue, вы используете собственный атрибут слота WebComponent. Таким образом, вы можете безопасно отключить эту проверку в своем .eslintrc.js файле, добавив

   rules: {
    'vue/no-deprecated-slot-attribute': 'off',
  }
 

к вашим правилам, чтобы глобально отключить это правило.

Или, если вы хотите отключить его для одной строки, добавьте это перед строкой:

   <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
  <div slot="main">
    <div>Hello World</div>
  </div>
  <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
  <div slot="sidebar">
    <div>Hello World</div>
  </div>