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