其他分享
首页 > 其他分享> > Nuxt入门之client-only原理

Nuxt入门之client-only原理

作者:互联网

仓库: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', () => {
      parent.$forceUpdate()
    })

    if (props.placeholderTag && (props.placeholder || placeholderSlot)) {
      return h(
        props.placeholderTag,
        {
          

标签:parent,only,client,props,placeholderTag,placeholder,Nuxt
来源: https://blog.csdn.net/qq_27868061/article/details/120856114