Я пытаюсь создать два пользовательских элемента с VueJS, чтобы они могли быть вложены и использованы на любой веб-странице или CMS, таких как Wordpress или каркас веб-приложения, без npm / webpacker et c. Думайте об этом как о создании пары пользовательских <ul> и <li> элементов с VueJS. Это минимальный пример, который воспроизводит мою проблему:
Я создал два отдельных файловых компонента:
components/MinimalInner.vue:
<template><p>Inner</p></template>
<script>export default {}</script>
components/MinimalOuter.vue:
<template>
<div>Outer<slot>default slot text</slot></div>
</template>
<script>
export default {
mounted() {
console.log(this.$children.length, " children");
}
}
</script>
И, наконец, это мой App.vue:
<template>
<div id="app">
<MinimalOuter>
<MinimalInner></MinimalInner>
</MinimalOuter>
</div>
</template>
<script>
import MinimalInner from "./components/MinimalInner.vue";
import MinimalOuter from "./components/MinimalOuter.vue";
export default {
components: {
MinimalInner,
MinimalOuter
}
};
</script>
Когда я запускаю это как Vue Компоненты через vue serve -o App.vue, я получаю ожидаемый результат в console: 1 children при подключении MinimalOuter.
Но когда я обслуживаю указанный ниже файл HTML, используя сборку веб-компонента, сгенерированную с помощью vue-cli-service build --target wc --name fc 'components/*.vue', я получаю 0 children. В консоли браузера ошибки не отображаются.
minimal.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>
<script src="dist/fc.js"></script>
</head>
<body>
<fc-minimal-outer>
<fc-minimal-inner></fc-minimal-inner>
</fc-minimal-outer>
</body>
</html>
Каким-то образом $children пусто при использовании MinimalOuter в качестве веб-компонента с <slot> s. Документы по https://vuejs.org/v2/api/#vm -детям говорят только о том, что $children не реагирует и порядок не гарантируется. Я не думаю, что массив $children ожидается пустым, когда дочерний компонент был передан через <slot>, но я могу ошибаться.
Чего я пытаюсь достичь в целом:
Мой сценарий использования для доступа к $children - создание пользовательского интерфейса для отработки флэш-карт, и фактический код можно увидеть здесь : https://github.com/learn-awesome/flashcard/tree/master/components. По сути, внешний компонент можно рассматривать как карусель, а внутренние компоненты представляют собой слайды. Показывается только первый слайд, но при взаимодействии с пользователем можно либо сделать первый слайд до последней позиции, либо удалить его из набора. Итак, я надеюсь, что $children будет массивом VueComponent экземпляров, точно так же, как я получаю с vue serve -o App.vue, чтобы я мог вызвать $destroy для них. Мне также потребуется способ вызова метода для внешнего элемента, когда пользователь нажимает кнопку во внутреннем элементе. В настоящее время я делаю это с:
if(this.$parent && this.$parent.doSomething)
this.$parent.doSomething();
, но мне нужен подход, который работает как в vue serve -o App.vue, так и в пользовательском элементе (<fc-minimal-outer> and <fc-minimal-inner> версии.