В VueJs `$ slots` недоступен в` mount`, когда целью сборки является веб-компонент - PullRequest
Новая
       2

В VueJs `$ slots` недоступен в` mount`, когда целью сборки является веб-компонент

0 голосов
/ 12 октября 2019

Как сказано в заголовке, я обнаружил, что $slots недоступен в mounted, когда целью сборки является web component. Он отлично работает для lib и обычной цели приложения.

Я создал пример проекта на github: https://github.com/MrCoder/vue-wc-slot-issue

Вот файл App.vue: 

<template>
  <div id="app">
    <slot></slot>
  </div>
</template>

<script>

export default {
  name: 'app',
  mounted() {
    window.App = this;
    // undefined
    console.log(window.App.$slots.default && window.App.$slots.default[0].text);
    this.$nextTick(() => {
      // undefined
      console.log(window.App.$slots.default && window.App.$slots.default[0].text)
    });
    setTimeout(() => {
      // 1234, correct value
      console.log(window.App.$slots.default && window.App.$slots.default[0].text)      
    });
  }
}
</script>

Создайте проект с помощью: 

yarn install
./node_modules/.bin/vue-cli-service build --target wc --name hello-slot

Используйте его сгенерированный веб-компонент в следующем html-файле: 

<meta charset="utf-8">
<title>hello-slot demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="./hello-slot.js"></script>


<hello-slot>1234</hello-slot>

Ожидаемое поведение: Должно быть напечатано1234 3 раза в консоли.

Фактическое поведение: В консоли выводится 1234 только один раз (в третий раз).

...