Make scopes available for all components in the hierarchy #5151
Comments
|
Yes, this is intended: making a slot to go through a parent component to get to its inner child is something you cannot know when using the parent component (aka implicit). It's harder to reason about, also imagine the mess if both, parent, and children have slots. Where should the content go? |
I've read on other issues, that the slots don't provide inheritance (which is fine, I guess). So I was thinking, regarding this question, that the content should always go to "the closest component" where it is defined (assuming the slots were distributed to all the inner children etc.)
This is what I tried, but I was trying to set the |
|
You have props, slots and render function to achieve anything 😁 |
|
Regarding my jsfiddle example: So you would pass down the edit: Just a quick implementation: https://jsfiddle.net/6ofnoyg6/4/ I don't know about you, but this seems overly complicated for something so simple. Other than the reason that it "gets harder to reason" about, I really would expect the slots to be passed down the hierarchy. |
|
When you use Passing down scoped slots is as simple as: render (h) {
return h('child', {
scopedSlots: this.$scopedSlots
})
} |
|
How would this work with a template rather than a render function? I have a tree component where you assign the scoped slots on the container and then the container items do: created () {
this.$scopedSlots = this.$parent.$scopedSlots
}This stopped working once I updated from v2.1 to v2.2 |
|
I think you could use a |
|
use the newly added feature provide / inject parent component: add it to the child component use it with |
|
Also, render functions are not necessarily a good solution. I came across a problem, where I need to distribute slots, across multiple levels, where render functions are impracticable because of the large @yyx990803 Can we use F.e. this could be useful, if you have |
|
i recommend you use vuex in case you are building a large App, and store this. |
|
To show what I'm talking about, I created a repo with a very simple project that shows the problem with slot distribution over multiple levels. Since this project is so simple, using vuex is counterproductive in my opinion. |
|
@posva, @yyx990803 bump. I know you closed this, but regardless, this is still an issue. There should be an easier mechanism to distribute slots over an arbitrary component-hierarchy, so that component that render the templates can utilize them. If any of the components within the hierarchy have a more complex template, using a render function becomes very tedious, even so if you use JSX. In my use case, the render function which I had to write became almost unreadable, because of nesting |
|
Please, don't spam... You should ask the question on the forums with concrete samples of your code (I know there's a repo). For instance, you should show the JSX that you think is unreadable, but please, do so on the forums |
Vue.js version
2.2.2
Reproduction Link
https://jsfiddle.net/6ofnoyg6/1/
What is expected?
I'd think that the templates defined in the "main" component would get passed down to all the components, including the full hierarchy. As you can see in the example, only the
containerhas the$scopedSlots, while the#appcomponent does not. Hence you can't overwrite slots over multiple levels, which would force you to eithertemplates insidecontainercomponent -> lose the ability to customize the components output / you need multiple prerendered files for each customizationchildcomponent and instead define everything in thecontainercomponent -> more unreadable, unmaintainable code.I've also asked on gitter and stackoverflow, but didn't get any answers (so far). I think this isn't possible by design, but is this intended?
The text was updated successfully, but these errors were encountered: