在生成的 HTML 中注入或初始化 Vue 组件答案

【问题标题】：Inject or Initialize Vue components in generated HTML在生成的 HTML 中注入或初始化 Vue 组件
【发布时间】：2018-01-31 23:51:05
【问题描述】：

我使用WYSIWYG article editor 为我保存在数据库中并稍后显示给用户的文章生成一些 HTML。

问题是我需要将 Vue 组件插入到这个自动生成的 HTML 中以显示动态产品。我可以在编辑器中创建一个添加 HTML 的自定义块，但我希望它作为一个 Vue 组件工作，直接从数据库更新产品描述。

我现在想的是添加一个按钮，该按钮添加一个带有产品 ID 数据属性的 div。然后我可以通过注入组件将代码中的 div 替换为具有相同 ID 的 Vue 组件。

我的另一个想法是简单地将 <product id="1031"/> 之类的组件添加为纯 HTML，然后尝试使用 Vue 编译整篇文章 HTML，但我读到 v-html 指令仅将代码编译为纯 HTML。

这可能吗？或者有什么更好的想法？

【问题讨论】：

标签： javascript html vue.js trumbowyg

【解决方案1】：

如果您使用的是 Vue 的完整版本（不是仅运行时版本），您可以初始化一个新的 Vue 实例并将其挂载到您喜欢的任何位置、传入数据等。

// Main app        
new Vue({
  el: '#app',
  data: {
    stuff: 'inserted message'
  },
  methods: {
    clicked() {
      // Add new
      new Vue({
        template: `<h1 style="color: red;">{{ message }}</h1>`,
        parent: this,
        data: {
          message: 'new message'
        }
      }).$mount(document.getElementById('more'))
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
  There are some things here before like {{ stuff }}
  but when you press <button @click="clicked()">add more</button>
  you can add more things here:
  <div id="more"></div>
</div>

【讨论】：

不幸的是，我没有使用完整版本，但如果我这样做了，这个解决方案会起作用，所以我会将其标记为正确。我实际上用一个带有自定义渲染功能的新父组件解决了这个问题。
可以在没有完整构建的情况下调用渲染函数吗？你介意告诉我你是怎么做到的吗？我很好奇@nilsi