Question

想想一个wordpress博客，或者带有一些内容的标准CMS。我使用wysiwyg编辑器（CKEditor）来编写我的内容并将它们保存到db。

我想在这个HTML中使用一些Vue组件，所以我在我的主题中添加了一个包装div。 HTML页面包含在

中

<div id="#my-custom-app">
...html from server
</div>

基本上我想添加例如

<my-app-image-compare></my-app-image-compare>

在我的HTML中使用CKEditor，然后我将创建一个安装在＃my-custom-app div上的应用程序。我将在html正文的末尾插入应用程序。

Vue.app文件没有模板，模板基本上是我用CKEditor编写的HTML页面，但每个组件都由应用程序加载和定义，每个组件都有一个模板。

我该怎么办？有没有办法让主Vue应用程序文件没有定义的模板？

Answer 1

选项1：

首先在基本模板上创建一个vue容器。然后，此模板将加载一个组件，该组件从服务器获取数据并显示它，因此：

// This is your main vue instance container
<div id="#my-custom-app">
  <dynamic-html v-if="myHtmlFromServer" template="myHtmlFromServer"></dynamic-html>
</div>

在此主要组件中，您需要挂钩已创建的事件，并使用编辑器中的HTML内容填充myHtmlFromServer。

import DynamicHtml from './myComponents/DynamicHtml'
new Vue({
  el: '#my-custom-app',
  data () {
    return {
      myHtmlFromServer: ''
    }
  },
  components: {
    DynamicHtml
  }
  created () {
    // this.myHtmlFromServer = this.getDataFromServer()
  }
})

<dynamic-html>组件将props: ['template']，并且在创建的事件上将分配this.$options.template = this.template。

此选项将设置该组件的HTML模板，并允许Vue正常呈现它（这意味着您可以在CKEditor中执行{{someVal}}。

选项2：

另一个选择是如果你使用像PHP这样的服务器端语言，那么你可以把那个html放在页面上，即echo $myHtmlContent，只要该内容包含<div id="#my-custom-app">，你Vue实例就会安装。 PHP将在 JS处理页面之前将HTML添加到页面，这样它才能正常工作。

如何将Vue组件与模板外的HTML混合

1 个答案:

选项1：

选项2：