从Vue应用程序的容器元素渲染HTML

fnvucqvd 于 2023-05-29 发布在 Vue.js

关注(0)|答案(1)|浏览(182)

我有一个带有Vue应用程序的HTML页面，包含一个组件。
应用程序安装在ID为paid-content的元素上。
网站Map

<div id="paid-content">
  <h2>You should see this if you're logged in</h2>
</div>

main.ts*

import PaidContent from './PaidContent.vue'
createApp(PaidContent).mount('#paid-content')

组件本身检查用户是否已登录。

付费内容.vue*

<script lang="ts">
export default {
    methods: {
        getUser() {
            return "bob"
        },
    }
}
</script>

<template>
    <template v-if="getUser() !== null">
        You are signed in!
        <slot></slot>
    </template>
    <template v-else>
        Please sign in.
    </template>
</template>

现在它显示：

您已登录！*.

我希望它在paid-content容器中呈现HTML，以显示：
您已登录！

登录后会看到

默认情况下，Vue似乎删除了<h2>元素。
我尝试过的：

使用槽
- 在DOM根组件模板 * 根据文档。此语法与我使用的静态站点生成器（Hugo）不兼容。

有没有一种方法可以从Vue组件中的容器元素呈现HTML？
(Vue版本为3.3.2）

vue.js

来源：https://stackoverflow.com/questions/76344053/render-html-from-vue-applications-container-element

1条答案

按热度按时间

zazmityj1#

获取根div，也就是#paid-content的innerHTML
把它传给PaidContent作为 prop
使用v-html渲染

`PaidContent.vue`

<script lang="ts">
export default {
  props: {
    // here
    paidContentHtml: {
      required: true,
      type: String,
    },
  },
  methods: {
    getUser() {
      return "bob";
    },
  },
};
</script>

<template>
  <template v-if="getUser() !== null">
    You are signed in!

    <!-- Render it here -->
    <div v-html="paidContentHtml"></div> 
  </template>
  <template v-else> Please sign in. </template>
</template>

`main.ts`

import { createApp } from "vue";
import PaidContent from "./PaidContent.vue";

const $paidContent = document.querySelector("#paid-content")?.innerHTML;

createApp(PaidContent, {
  paidContentHtml: $paidContent,
}).mount("#paid-content");

赞(0）回复(0）举报 2023-05-29

我来回答

从Vue应用程序的容器元素渲染HTML

登录后会看到

1条答案

`PaidContent.vue`

`main.ts`

相关问题

热门标签

最新问答