Vue动态部件.安装表

Question

我使用Webpack动态导入和Vue 动态分量来延迟加载一个相当大的Vue标记解析组件。

现在，我想用Prism.js添加语法突出显示。我目前正在使用父组件的mounted()生命周期挂钩来安装语法突出显示，但这只是在某些时候才起作用，因为语法突出显示依赖于要首先加载的Markdown组件(当我在页面加载后从控制台手动执行Prism.highlightAll()时，每次都有效)。

相关源代码：

<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>

然后，我动态地将这个组件导入父组件。

但不确定这是不是最好的解决办法..。