fix(nuxt): pass params to client-only slot (#6584)

This commit is contained in:
Julien Huang 2022-08-17 17:26:51 +02:00 committed by GitHub
parent 94f76ea930
commit c688e1898c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 49 additions and 2 deletions

View File

@ -44,10 +44,10 @@ export function createClientOnly (component) {
.then((setupState) => {
return typeof setupState !== 'function'
? { ...setupState, mounted$ }
: () => {
: (...args) => {
return mounted$.value
// use Fragment to avoid oldChildren is null issue
? h(Fragment, null, [h(setupState(props, ctx), ctx.attrs)])
? h(Fragment, null, [h(setupState(...args), ctx.attrs)])
: h('div', ctx.attrs)
}
})

View File

@ -130,6 +130,14 @@ describe('pages', () => {
await expectNoClientErrors('/another-parent')
})
it('/client-only-components', async () => {
const html = await $fetch('/client-only-components')
expect(html).toContain('<div class="client-only-script" foo="bar">')
expect(html).toContain('<div class="client-only-script-setup" foo="hello">')
await expectNoClientErrors('/client-only-components')
})
})
describe('head tags', () => {

View File

@ -0,0 +1,17 @@
<script lang="ts">
export default defineNuxtComponent({
name: 'ClientOnlyScript',
props: {
foo: {
type: String
}
}
})
</script>
<template>
<div>
<div>client only script component {{ foo }}</div>
<slot name="test" />
</div>
</template>

View File

@ -0,0 +1,10 @@
<script setup lang="ts">
const props = defineProps<{ foo: string }>()
</script>
<template>
<div>
<div>client only script setup component {{ props.foo }}</div>
<slot name="test" />
</div>
</template>

View File

@ -0,0 +1,12 @@
<template>
<div>
<ClientOnlyScript class="client-only-script" foo="bar" />
<ClientOnlySetupScript class="client-only-script-setup" foo="hello">
<template #test>
<div class="slot-test">
Hello
</div>
</template>
</ClientOnlySetupScript>
</div>
</template>