时间戳

首页 > 解决方案 > 如何在另一个 HTML 文件中使用 Vue.js 模板

javascript - 如何在另一个 HTML 文件中使用 Vue.js 模板

问题描述

我已经使用 vue.js 创建了一个模板现在我想通过使用模板 ID 在另一个 HTML 文件中使用这个模板

ex <div id="widgetId"> </div>

widgetId 是模板 ID

在这里，我正在尝试创建用于显示模板的嵌入代码

但我没有得到任何结果。当我直接使用这个嵌入代码时，有什么方法可以在另一个 html 文件中获取 Vue 模板？

我的代码如下

<script>
window.onload = function() {

var div = document.createElement('div');
div.className = 'widget-pos';
div.id = 'widget-posId';
document.body.appendChild(div);

var iframe = document.createElement('iframe');
iframe.id = 'widget-iframeId';
iframe.src = "javascript:false";
document.getElementById("widget-posId").appendChild(iframe);

document.getElementById('widget-iframeId').contentWindow.document.write(" 
<html><body><div id=widgetId></div></body></html>");

var iframeScript = document.createElement('script');
iframeScript.setAttribute("src","/packs/main.js");

var Vuescript = document.createElement('script');
Vuescript.setAttribute('src',"//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js")


$("#widget-iframeId").contents().find("head").append(iframeScript);
$("#widget-iframeId").contents().find("head").append(Vuescript);
}
</script>

标签： javascriptvue.js

解决方案

我建议你阅读这篇文章。

一种解决方案可以像这样导入您的外部模板：

new Vue({
  el: "#app",
  template: require('./myTemplate.html')
});

推荐阅读