只有在创建 SSR 网站/应用时,QNoSsr 组件才有意义。
它避免在服务器上渲染其内容,并将其留给客户端。当您遇到无法进行同构并且只能在客户端(浏览器中)运行的代码时,这很有用。
或者,您也可以使用它仅在服务器端渲染内容,如果最终在客户端浏览器上运行,它会自动将其删除。
使用
基础
<q-no-ssr>
<div>This won't be rendered on server</div>
</q-no-ssr>
内容粘贴
多个客户端节点
<q-no-ssr>
<div>This won't be rendered on server.</div>
<div>This won't either.</div>
</q-no-ssr>
内容粘贴
带 tag 属性的多个客户端节点
<q-no-ssr tag="blockquote">
<div>This won't be rendered on server.</div>
<div>This won't either.</div>
</q-no-ssr>
内容粘贴
占位符属性
<q-no-ssr placeholder="Rendered on server">
<div>This won't be rendered on server</div>
</q-no-ssr>
内容粘贴
占位符插槽
<q-no-ssr>
<div>This won't be rendered on server</div>
<template v-slot:placeholder>
<div>Rendered on server</div>
</template>
</q-no-ssr>
内容粘贴
占位符插槽中的多个内容
<q-no-ssr>
<div>This won't be rendered on server</div>
<template v-slot:placeholder>
<div>Rendered on server (1/2)</div>
<div>Rendered on server (2/2)</div>
</template>
</q-no-ssr>
内容粘贴
仅占位符插槽
<q-no-ssr>
<template v-slot:placeholder>
<div>Rendered on server</div>
</template>
</q-no-ssr>
内容粘贴