New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Functional component not rendering named slot (following #8871) #8878
Comments
Responded on the Vue Forum as well, is this maybe the same issue as in #7587? It works by using a scoped slot: |
I've been running into this for a little while now, trying to make a simple functional component to use with values created by daggy.js. I've created a codesandbox thingy with a number of cases showing the effects of this. Peeking at the VNodes being created during the render call, the issue seems to be caused by the root element of a named unscoped slot passed to a functional component still having Example results of using a named, unscoped slot with a plain DOM node:
Compare this to the use of a template tag as the slot root:
The exact component used to wrap the functional component doesn't matter, as demonstrated in the codesandbox example at the top of this post, I just ran into this using the Transition component most recently, hence the appearance of For now, I'm going to stick to wrapping the contents of slots in |
I've ran into this issue too. Seems to only occur when a functional component wraps another functional component. |
I have same problem, When a functional component wraps another functional component. |
there should be an anwser you want here |
Ok, can be a solution , but I use SFC functional with default slot: <template functional>
</template> |
In this specific scenario, the render(h, context) {
context.data.scopedSlots = {
username: () => h('span', {}, 'World')
}
return h(Child, context.data, [])
}, I think we may need to adapt the functional component to allow passing a child with a render(h, context) {
context.data.scopedSlots = {
username: () => h('span', {}, 'World')
}
return h(Child, context.data, [
h('span', { slot: 'username' }, 'World')
])
}, @nickmessing I imagine the jsx plugin transforms into this because it has no way of knowing if |
Version
2.5.17
Reproduction link
https://codesandbox.io/s/p9mx85qpz0
Steps to reproduce
nothing in particular.
What is expected?
It should display
Hello World
What is actually happening?
It displays
Hello
Following #8871 I made App.vue non-functional:
If you make Child.vue non-functional it works: https://codesandbox.io/s/pw5lzx2w90
If you use default (not named) slots it works: https://codesandbox.io/s/04jrp3y4ln
The text was updated successfully, but these errors were encountered: