Question

我的组件名为Grid。在这个组件内部，我从服务器加载JSON数据，然后渲染它们。它们主要是字符串和整数。有时，JSON包含<strong>myvalue</stong>之类的HTML，因此我使用三个括号{{{和}}}呈现数据。

当HTML不是纯HTML而是像<my-component my-param="1"></my-component>这样的组件时。如何告诉Vue.js渲染这个组合？我得到的只是纯粹打印成网格的HTML。

由于

Answer 1

使用v-html（相当于{{{}}}）如果它是一个组件，将无法呈现其中的内容。

而是尝试在父模板中使用<slot>。

否则，如果您需要动态组件，则需要使用<component>，如果您想要在这些动态组件中使用内容，则需要使用<slot>。

我建议你使用像

这样的东西

<component :is="myComponent" />

并在这些组件的模型中放置了一些<slot>来插入任意内容。

Answer 2

您需要再次编译从远程加载的那段代码。

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文档中的编译和反编译方法。

Vue.js - 组件内部的组件

2 个答案: