Question

我正在使用Webpack动态导入和Vue dynamic components来延迟加载相当大的Vue markdown解析组件。

现在，我想使用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>

那我该如何等待 dynamic 组件加载？我几乎想要这样的东西：

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

然后，我将该组件动态导入到父组件中。

不过，不确定这是否是最佳解决方案...

Vue动态组件-注意安装

1 个答案: