Question

我正在使用Vue插件组件Timeago，并且我想在地图插件的内容中显示timeago时间。一个超级简化的示例来说明用法，例如：

let popup = L.responsivePopup().setContent(`
    <h1>Hello world</h1>
    <p>A thing happened <Timeago datetime="${datetime}"></Timeago></p>
`);
L.marker([lat, lon]).bindPopup(popup).addTo(this.map);

根据this answer和Vue's documentation，我应该能够使用Vue.compile()进行编译，但是我不理解这个概念。

首先，没有任何关于“完整版本”的解释。我怎么知道我拥有的是“完整版本”？搜索“ vuejs full build”不会返回任何实际上被称为该短语的内容，即使他们在该文档中使用了该短语。我所知道的是，当我尝试导入Vue.compile()来调用import Vue from 'vue'时，它抱怨说：

TypeError：vue__WEBPACK_IMPORTED_MODULE_6 __。default.compile不是函数

所以我不知道从那里去哪里。

然后第二件事是（假设第一件事被排序了），我是否必须使我的HTML保留具有特定id的空div，等待它呈现，然后调用{{1 }}，因为其中的示例代码在元素ID上以Vue.compile()运行？因为这似乎有点“不正确”，所以似乎又多了一步。还是这是使此方案起作用的唯一方法？

如果还有另一种更简单的等待完成此工作的方法，例如让.mount()组件仅返回渲染的字符串，例如Timeago，我可以将其合并到字符串文字中，则将也为我工作。两种方法都可以。

Answer 1

Vue的软件包具有不同的构建，persistentvolumeclaim意味着该软件包可以编译模板并运行它。所有构建类型都可以在https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds

中找到

Vue.compile允许您使用渲染函数，该函数允许您以编程方式操作DOM并创建元素。在这里，您可以找到有关https://vuejs.org/v2/guide/render-function.html

的Vue文档

关于您面临的问题，您可以创建一个vue组件并将该弹出窗口放入其中，渲染时此组件将渲染timeago组件。

full

如何将自定义组件呈现到地图的标记弹出窗口中？

1 个答案: