Vue динамические компоненты - часы для навесных

Question

Я использую динамический импорт Webpack и динамические компоненты Vue для отложенной загрузки довольно большого компонента анализа разметки Vue.

Теперь я хочу добавить подсветку синтаксиса с помощью Prism.js. В настоящее время я использую хук жизненного цикла mounted() родительского компонента для установки подсветки синтаксиса, но это работает только в некоторых случаях, поскольку подсветка синтаксиса зависит от компонента Markdown, который должен быть загружен первым (когда я выполняю * 1006 вручную * из консоли после загрузки страницы, она работает каждый раз).

Соответствующий исходный код:

<template>
<vue-markdown>
    # Hello
    ```javascript
    import { hello } from "world"
    ```
</vue-markdown>
</template>
<script>
export default {
  components: {
    "vue-markdown": () => import("vue-markdown/src/VueMarkdown"),
  },
  mounted() {
    import("prismjs/themes/prism-tomorrow.css")
      .then(() => import("prismjs").then(p => Prism.highlightAll()))
  }
}
</script>

Итак, как мне ждать загрузки динамического компонента? Я почти хочу что-то вроде этого:

<vue-markdown v-on:mounted="syntaxHighlighting()"></vue-markdown>

Answer 1

Я решил эту проблему, создав собственный компонент, который расширяет компонент VueMarkdown, но с хуком mounted(), который активирует подсветку синтаксиса. Это выглядит так:

<script>
import VueMarkdown from "vue-markdown/src/VueMarkdown"
import "prismjs/themes/prism-tomorrow.css"
import Prism from "prismjs"

export default {
    extends: VueMarkdown,
    mounted() {
        Prism.highlightAll()
    }
}
</script>

Затем я динамически импортирую этот компонент в родительский компонент.

Не уверен, что это лучшее решение, хотя ...