Question

在Vue2中，我的组件中有以下几行的字符串。

<template>
    <div><h1>Hello World</h1>
    <div v-html="testString"></div>
    </div>
</template>
<script>
    export default {
        name: "test-component",
        props: ['incoming'],        
        data: function() {
            return {
                testString: "";
            }
        },
        created() {
            this.testString = this.incoming;
        }
    }
</script>

然后当我执行以下操作（所有导入都正确完成）

<template>
    <text-component :incoming="mycontent"></text-component>
</template>
<script>
import 'test-component' from './path/to/test-component.vue'
export default { // etc, just presume this bit is right, it's only psudo code
components: ['test-component'],
data() { return { mycontent: '' }},
created() {
    this.mycontent="I just want to <router-link to='/home' v-html='Go Home'></router-link>"
</script>

所以现在我想要第一个带有 testString 的模板来渲染＆lt; router-link＆gt; ，就像我直接把它放在自己身上一样。

我在我的测试组件中尝试了 v-html 和 {{}} ，但我认为我错过了一些东西。我很确定在Vue1中我会使用 {{{}}} 。

任何人都可以帮忙吗？感谢。

Answer 1

来自documentation on v-html：

请注意，内容是以纯HTML格式插入的 - 它们不会被编译为Vue模板。

您应该使用slot代替。

将插槽添加到testComponent：

<template>
  <div><h1>Hello World</h1>
  <slot></slot>
</template>

然后将内容放在test-component标记中：

<template>
  <test-component>
    I just want to <router-link to='/home' v-html='Go Home'></router-link>
  </test-component>
</template>

如何在字符串vue2中渲染对象

1 个答案: