Vue 动态组件 - 监视挂载答案

【问题标题】：Vue dynamic components - watch for mountedVue 动态组件 - 监视挂载
【发布时间】：2019-06-03 19:05:49
【问题描述】：

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

现在，我想用 Prism.js 添加语法高亮。我目前正在使用父组件的mounted() 生命周期钩子来安装语法高亮，但这仅在某些时候有效，因为语法高亮取决于首先加载的 Markdown 组件（当我手动执行 @987654323 @来自控制台在页面加载后，它每次都有效）。

相关源码：

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

【问题讨论】：

标签： vue.js webpack

【解决方案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>

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

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

【讨论】：