3

我使用了一个所见即所得的文章编辑器，它为我保存在数据库中并稍后显示给用户的文章生成一些 HTML。

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

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

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

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

4

1 回答 1

2

如果您使用的是 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>

于 2017-09-23T01:59:04.847 回答