Vue - Невозможно передать реквизиты динамически импортированному веб-компоненту

Question

мой старый друг.

Я направляюсь к файлу vue, который импортируется asyn c (через импорт) при маршрутизации. Его шаблон приведен ниже, он в основном существует для загрузки в более толстый веб-компонент и обеспечивает отделение от этого более толстого компонента (так называемые mcclure-events).

<template>
  <mcclure-events :userState="userState"></mcclure-events>
</template>

<script>
export default {
  name: 'mCclureEvents',
  components: {},
  props: {
    userState: Object
  },

  // Example of import statement used.
  mounted () {
    import(/* webpackIgnore: true */ './mcclure-events.min.js')

  },

  // Importing here did not help.
  beforeRouteEnter (to, from, next) {

  }
}
</script>

Я получаю mcclure-events, минуя веб-пакет и общаясь с сервером.

mcclure-events - это веб-компонент в отдельном проекте, созданный с помощью:

vue-cli-service build --target wc --name mcclure-events

Я нахожусь на Vue 2.6.1

mcclure-events нет быть назначенным userState.

Я пытался ...

• извлечь события mcclure перед извлечением файла-заглушки

• извлечь mcclure- события после извлечения заглушки, но до направления на

• и после того, как заглушка будет направлена ​​и смонтирована.

Answer 1

Этот код выглядит странно. Вы импортируете файл, но нигде не назначаете его и, что более важно, не регистрируете компонент.

Как правило, именно таким образом вы динамически импортируете компонент в vue:

export default{
    components: {
        'mcclure-events': () => import(/* webpackIgnore: true */ './mcclure-events.min.js')
    }
}

Попробуйте сделать это и посмотрите, поможет ли это.