nuxt.js入门之client-only原理

crayon-shin-chan

已于 2022-05-24 23:43:19 修改

阅读量5.1k

点赞数

分类专栏： surprise vue 文章标签： vue.js javascript

于 2021-10-19 22:21:55 首次发布

本文链接：https://blog.csdn.net/qq_27868061/article/details/120856114

版权

surprise 同时被 2 个专栏收录

932 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

vue

24 篇文章

订阅专栏

本文介绍了Nuxt.js的client-only组件，它主要用于在SSR中确保组件只在客户端渲染。原理是在父组件的mounted事件在浏览器端触发时，强制更新并触发子组件的更新，只有在组件_isMounted为true时，才会显示client-only包裹的子组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

仓库：vue-client-only/index.js at master · egoist/vue-client-only · GitHub

1.简介

client-only用于在ssr中指定组件在客户端渲染

2.原理

export default {
  name: 'ClientOnly',
  functional: true,
  props: {
    placeholder: String,
    placeholderTag: {
      type: String,
      default: 'div'
    }
  },
  render(h, { parent, slots, props }) {
    const { default: defaultSlot = [], placeholder: placeholderSlot } = slots()

    if (parent._isMounted) {
      return defaultSlot
    }

    parent.$once('hook:mounted',

了解本专栏