首页 文章

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

提问于
浏览 次
0

想想一个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应用程序文件？

vue.js vuejs2

1 回答

  • 0

    选项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添加到页面中，这样它才能正常工作 .

    回复于

相关问题