我确实有一个名为 Grid 的组件。在这个组件中，我从服务器加载 JSON 数据并渲染它们。它们主要是字符串和整数。有时 JSON 包含像 <strong>myvalue</stong> 这样的 HTML，所以我用三个括号 {{{ 和 }}} 呈现数据。
问题是当 HTML 不是纯 HTML 而是像 <my-component my-param="1"></my-component> 这样的组件时。如何告诉 Vue.js 渲染这个组件？我得到的只是纯粹打印到网格中的 HTML。
谢谢
【问题讨论】：
标签： javascript vue.js
您需要再次编译从远程加载的那段代码。
ps：我将使用 jQuery 来操作 DOM。
在这个组件中，我从服务器加载 JSON 数据并渲染它们。
我假设您有一个名为“loadAndRenderFromServer()”的函数，请修改下面的代码以适合您。
例如：如果您的网格有标记<div id='grid'>
// vuecomponent.js
export default {
[...]
methods: {
loadAndRenderFromServer() {
// first, load remote content and insert into #grid
// now, compile
this.$compile($("#grid").get(0));
}
},
[...]
}
如果您的组件开始复制加载的内容，您可能需要使用“反编译”。查看 VueJS 文档中的 compile 和 decompile 方法。
【讨论】：
$(this.$els.whatever).text('foobar'); 这样的事情，这浪费了 Vue 的反应性和模板系统。
如果是组件，使用v-html（相当于{{{}}}）将不会渲染其中的内容。
尝试在您的父模板中使用<slot>。
否则，如果您想要动态组件，则需要使用<component>，如果您想要动态组件中的内容，则需要使用<slot>s。
我建议你使用类似的东西
<component :is="myComponent" />
并在这些组件的模型中放置一些<slot>s 以插入任意内容。
【讨论】：