javascript - 如何将一些 HTML 中的 Vue 组件添加到另一个 Vue 组件？

Question

我有一个巨大的动态 HTML 字符串，我正在将其加载到 Vue 组件内的 div 中。 HTML 字符串本质上是来自所见即所得编辑器的内容。最初，我只是为此使用了 v-html，而且没问题。

但是，现在有些情况下我需要用实际的 Vue 组件替换部分 HTML 字符串，我不确定这样做的最佳方法。

例如，我可能在 HTML 字符串中有一些如下所示的标记:

||map:23||

我想做的是用 Vue 组件替换它，如下所示:

<map-component :id="23"></map-component>

我尝试在 Laravel 中提前进行字符串转换，然后仅在 Vue 组件中使用 v-html 来注入(inject)内容，但这似乎并没有加载 Vue 组件。

然后我尝试为 HTML 内容使用一个插槽，这确实有效，但它有一个令人讨厌的副作用，即在 Vue 能够正确渲染它之前，在屏幕上显示一堆未格式化的 HTML 内容一两秒钟.

所以我的问题是:是否有另一种(更优雅的)方法来做到这一点？我在想，在 Vue 组件加载 HTML 内容后，我可以通过某种方式在标记中找到例如 ||map:23|| 实例，然后用正确的 Vue 动态替换它们组件，但如果可能的话，我不知道如何；我在 Vue 文档中找不到任何内容。

有人知道这是否可行吗？谢谢。

Answer 1

您可以使用 Vue.compile编译模板字符串(可以包含 vue 组件)。

然后您可以将它与具有 render() 方法的组件结合起来，只渲染模板:

// this component will dynamically compile the html
// and use it as template for this component.
Vue.component("dynamic-html", {
  props: ["html"],
  computed: {
    template() {
      if(this.html)
        return Vue.compile(this.html).render;
      return null;
    }
  },
  render() {
    if(this.template)
      return this.template();
    return null;
  }
});

这允许你渲染任意模板字符串，它也可以包含 vue 组件:

<dynamic-html html="<some-component></some-component>">
</dynamic-html>

此外，您还可以使用它来将 Prop /事件处理程序传递给字符串中的组件:

<!-- Passing down props -->
<dynamic-html
    html='<some-component :prop="$attrs.myprop"></some-component>'
    :myprop="12"
></dynamic-html>

<!-- passing down events -->
<dynamic-html
    html='<some-component @click="$emit('foo', $event)"></some-component>'
    @foo="doSomething"
></dynamic-html>

(您需要使用 $attrs 来访问 Prop ，因为它们不在 dynamic-html 的 props 定义中> 组件)

完整代码示例:

// this component will dynamically compile the html
// into a vue component
Vue.component("dynamic-html", {
  props: ["html"],
  computed: {
    template() {
      if(this.html)
        return Vue.compile(this.html).render;
      return null;
    }
  },
  render() {
    if(this.template)
      return this.template();
    return null;
  }
});

Vue.component("red-bold-text", {
  props: ["text"],
  template: '<span class="red">{{text}}</span>'
});

new Vue({
  el: '#root',
  data: {
    html: null,
    myBoundVar: "this is bound from the parent component"
  },
  mounted() {
    // get the html from somewhere...
    setTimeout(() => {
      this.html = `
        <div>
          WELCOME!
          <red-bold-text text="awesome text"></red-bold-text>
          <red-bold-text :text="$attrs.bound"></red-bold-text>
          <button @click="$emit('buttonclick', $event)">CLICK ME</button>
        </div>
      `;
    }, 1000);
  },
  methods: {
    onClick(ev) {
      console.log("You clicked me!");
    }
  }
});

.red { color: red; font-weight: bold; margin: 6px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
  <div>This will load dynamically:</div>
  <dynamic-html :html="html" :bound="myBoundVar" @buttonclick="onClick"></dynamic-html>
</div>