Vue 3: Библиотека компонентов с компонентом, который состоит из другого, не отображает базовый компонент

Я зарегистрировал проблему, но, похоже, это просто что-то, что я делаю не так ...

У меня есть компонент (CoolComponent или <cool-component>), который я определил внутри библиотеки и является производным от другого компонента (BaseComponent или <base-component>).

CoolComponent.vue выглядит так:

<template>
  <div class="cool-component">
    <BaseComponent message="This is the message">
      <template v-slot:something>
        This is something!!
      </template>
    </BaseComponent>
  </div>
</template>

Проблема в том, что когда я использую компонент <cool-component> в проекте, отображаются только элементы внутри класса CoolComponent. Компонент BaseComponent отображается как буквальный тег (<basecomponent> - без дефиса). Я предполагаю, что, поскольку он переводится на <basecomponent>, Vue не знает, как визуализировать базовый компонент.

Консоль содержит следующее предупреждение: [Vue warn]: resolveComponent can only be used in render() or setup().

Не совсем уверен, что я сделал не так с настройкой или это ошибка.

Воспроизведение (репо) здесь: https://github.com/lukef/vue-component-repro < / а>.


vue.js vuejs3 vue-component
person Luke    schedule 05.09.2020    source источник
comment
как насчет <base-component message="This is the message">   -  person Boussadjra Brahim    schedule 06.09.2020
comment
Это тоже не работает.   -  person Luke    schedule 06.09.2020
comment
не могли бы вы воспроизвести это в codeandbox   -  person Boussadjra Brahim    schedule 06.09.2020
comment
Мне не удалось создать ваше репо. Не могли бы вы попробовать клонировать его самостоятельно и убедиться, что следование инструкциям в README.md действительно работает для вас?   -  person skirtle    schedule 06.09.2020
comment
Извините. Сначала вам нужно установить пряжу, и возникла одна небольшая проблема. Я изменил инструкции и код, но результат остался прежним. Попробуй сейчас.   -  person Luke    schedule 07.09.2020
comment
У вас все еще есть проблемы с этим? Я помогал изучить аналогичную вещь для проекта и обнаружил, что проблема заключается в том, как пакет устанавливается локально. Если вы все еще ищете ответы, я хотел бы задать вам несколько вопросов о вашей локальной реализации, и, возможно, то, что мы нашли, вам поможет.   -  person innerurge1    schedule 20.11.2020

Ответы (1)


arrow_upward
1
arrow_downward

Это заняло у меня некоторое время, но теперь я думаю, что разгадал загадку. См. Внизу tl;dr, здесь следует создание первого.

Первое наблюдение заключалось в том, что копирование компонентов из comp без изменений в comp-test привело к созданию рабочей страницы. Затем я попытался импортировать их прямо из comp, используя относительные пути, что привело к исходной ошибке. Это привело меня к выводу, что должна быть какая-то разница в окружении. После некоторых экспериментов я обнаружил, что node_modules в comp вызвала сбои: после их удаления включение из comp также работало. Заглянув в файлы в comp-test/node_modules/comp, я обнаружил, что оригинал node_modules из comp также скопирован. Теперь мне нужно было найти способ добавить comp в comp-test, не копируя node_modules. Хотя node_modules не опубликованы, ни .gitignore, ни .npmignore не возымели никакого эффекта. Решением было создать архив с использованием yarn pack и импортировать его из comp-test.

Вероятно, исходная проблема - это конфликт в двух node_modules, но он возникает только тогда, когда в BaseComponent есть <slot> - странно ...

Это приводит к следующим исправлениям:

in comp/package.json:11

"build": "yarn build:lib && yarn pack",

(вместо просто yarn build:lib), а в comp/package.json:15

"comp": "file:../comp/comp-v0.1.0.tgz"

(вместо "comp": "../comp"). Чтобы обновить comp после некоторых изменений, вы должны выполнить следующие команды:

in comp:

$ yarn build

затем в comp-test:

$ yarn add file:../comp/comp-v0.1.0.tgz
$ yarn serve

Обратите внимание, что фактический результат yarn pack - это не совсем то, что вы могли бы подумать, читая его описание - по крайней мере, для меня зависимости пакетов означают в конечном итоге некоторое содержимое некоторого node_modules каталога. Вместо этого он создает архив, содержащий более или менее те же файлы, что и опубликованные с использованием yarn publish. После yarn build:lib && yarn pack содержимое архива обновляется, и yarn add file:../comp/comp-v0.1.0.tgz принудительно обновляет comp-test/node_modules/comp.

person Remigius Stalder    schedule 21.09.2020