Imagine that you have a user list component UserList that shows users in scrollable view. Each users details are represented with UserDetails component wrapped with Card component.
UserList
<template>
<Card>
<UserDetails />
</Card>
<Card>
<UserDetails />
</Card>
...
</template>
Now imagine that you're using this UserList component and want to re-implement the wrapper for UserDetails without modifying it's contents.
Adding a slot would work for replacing the wrapper but everything inside the wrapper would need to be re-implemented as well.
It would be nice if we could write Vue like this:
UserList
<template>
<slot name="wrapper">
<Card>
<template #content>
<UserDetails />
</template>
</Card>
</slot>
...
</template>
Consuming component:
<UserList>
<template #wrapper>
...
<NewImplementation>
<slot :name="content" />
</NewImplementation>
</template>
</UserList>
It would work by using slots in "reverse" way of how we're used to.
This isn't valid syntax but I bet someone else has thought about the same problem. The need to replace some content with slot but not all of it.
Wrapper component could be given as property but I think it's not the correct solution because we have slots to avoid doing just that.
Are there any good solutions?
If I understood right, what you're looking for is Teleports (previously called Portals) which is only available in version 3.0
What you want is problematic. Vue has no direct support for something like that.
Let me establish some naming conventions before I try to explain why:
Child - UserList component
Parent - component consuming Child
Main problem in this scenario is that slot content is completely generated in the consuming component and just passed to a Child component using
$slots - this is for normal slots. $slots.wrapper is just a static array of VNodes
$scopedSlots - for scoped slots. $scopedSlots.wrapper is a function. When Child renders it calls that function and renders returned an array of VNodes
(Note: In Vue 3 it is just $slots. All slots are functions)
What that means is that Child component has no way to somehow change the content of the slot (e.g. include something in the middle). It can pass some data into it (slot scope) but that's all...
Possible workarounds:
1. Just pass a wrapper component as a prop
Wrapper component could be given as property but I think it's not the correct solution because we have slots to avoid doing just that.
Well not really. Slots have a different purpose. If you want to change the wrapper and let the rest of the Child intact, this is pretty good and simple solution
2. Give a Parent the component it should render inside the wrapper using slot scope
This is something very well demonstrated in route-view component of Vue Router 4.x - see the docs
<UserList v-slot="{ UserComponent, UserData }">
<NewWrapper>
<component :is="UserComponent" v-bind:data="UserData" />
</NewWrapper>
</UserList>
So you have <component :is="UserComponent" /> instead of <UserDetails />. This is useful as the UserList component can now control what component is rendered inside the wrapper (and even change it dynamically)
Related
I'm converting some components from vue 3's option API to the composition API. In this particular component I have two nested child components:
<script lang="ts" setup>
import ShiftOperation from "#/components/transformation-widgets/ShiftOperation.vue";
import RawJolt from "#/components/transformation-widgets/RawJolt.vue";
console.log([ShiftOperation, RawJolt])
...
From what I understand, if you're using the setup attribute in the script tag then all you have to do is import the component into a variable like I'm doing above and it should be available for the template without having to do anything else, like it's not like the old options api where you had to inject those components into the parent component.
Both components are imported successfully (confirmed by the console log:
When I'm rendering out this parent component I'm using the two child components to render out an array of data where I reference the children dynamically in the template based on information in each block of data that I'm iterating over:
<template>
<div class="renderer-wrapper">
<component
v-for="(block, index) in store.specBlocks"
v-bind:key="index"
:block="block"
:index="index"
:is="determineBlockComponent(block)"
#block-operation-updated="updateBlock"
>
</component>
</div>
</template>
// logic for determining the component to use:
export const determineBlockComponent = (block: JoltOperation) => {
switch (block.renderComponent) {
case 'shift':
return 'ShiftOperation'
default:
return 'RawJolt'
}
}
This worked fine in the options api version of it, but for some reason the components don't actually render. They show up in the elements tab:
But they don't show up in the view. I also added a created lifecycle hook into the child components that just console.log's out saying "created X", but those hooks don't fire.
Business logic wise nothing has changed, it's just been going from option api to composition api, so I'm assuming I'm missing some key detail.
Any ideas?
Your determineBlockComponent function should not return the string but the object of the component. Replace return 'ShiftOperation' with return ShiftOperation
I'm trying to remember how to pass a parent's :class bindings to a specific child component within a template. For instance:
// parent-component.vue
<template>
<child-component :class="['foo', bar, 'baz']">
</template>
// child-component.vue
<template>
<div class="dont-want-classes-here">
<h1 class="not-here-either">Someting v Important</h1>
<sub-component :class="['want-parent-classes in-here', ...$parent.classes]">
</div>
</template>
Do I need to create a new prop just for that purpose? is there a specific part of the Vue instance I can access from within the component?
Thanks
Do I need to create a new prop just for that purpose?
Yes. Vue does not provide a way to customize how the class and style props are applied to the template. It will always apply them to the root element and you cannot change this.
However if it were a functional component, then you can do this. But that doesn't apply here.
Is there a specific part of the Vue instance I can access from within the component?
You can access the class directly from the vnode:
this.$vnode.data.staticClass // for class="static"
this.$vnode.data.class // for :class="dynamic"
How can I update data object of parent whenever changes happen inside v-for. I have a child component that I use inside parent component.
ParentComponent.vue
<template>
....
....
<child-component
v-for="i in count"
ref="childComponent"
:key="i"
currentPage="i" // currentPage doesn't update.
:page="i"
/>
<q-header>
{{currentPage}} // always displays default value:1
</q-header>
</template>
<script>
data () {
return {
pageCount: 10,
currentPage: 1,
}
},
How can I update currentPage of data object whenever i changes inside v-for. I have tried using watch without much luck. I don't have access to child component and can't modify it.
Much appreciated!
There is some slight confusion with how v-for is working on the child-component here. Writing currentPage="i" as a property (which should actually be v-bind:currentPage in order for the i to be interpreted as JS) will simply declare the attribute on each child-component
How can I update currentPage of data object whenever i changes inside v-for
i doesn't "change" in the traditional context of running a for loop inside of a normal JavaScript application. In Vue, your rendering logic and application logic are separate, and rightly so, because running logic as part of the rendering doesn't really make sense.
For example, let's look at how your app will render the child-component:
<!-- Vue output -->
<child-component ... currentPage="1" />
<child-component ... currentPage="2" />
<child-component ... currentPage="3" />
So let's look at separating the rendering logic from the application logic.
I realise you don't have access to child-component, but based on the context I will assume it is some kind of tabbing functionality (based on you trying to set a value for the "current page" - feel free to be more specific and I can update my answer).
We need to bridge that gap between the rendering logic and the application logic and we can do that by using events:
<child-component
v-for="i in count"
:ref="`childComponent-${i}`" // ref should be unique so add the i as part of it
:key="i"
:page="i"
v-on:click="currentPage = i" // when the user clicks this child component, the current page will be updated
/>
You may have to utilise a different event other than click but I hope this gets you closer to what you are trying to achieve. For the value of currentPage to update there has to be some kind of user input, so just find out which event makes the most sense. Maybe the child-component library you are using has custom events that are more appropriate.
you should look into Custom Events.
https://v2.vuejs.org/v2/guide/components-custom-events.html
Idea is, that whenever there is some update of your desire in child component, you can execute this.$emit(“change”), which will throw an event.
On parent side you can catch this event by #change=“myMethod” as one of the attributes.
methods: {
myMethod() {
console.log("Testing")
}
}
<child-component
v-for="i in count"
ref="childComponent"
:key="i"
currentPage="i"
:page="i"
#change=“myMethod”
/>
Let me know if that helped.
Let us assume we have 100 components. We usually add the component selector/name in HTML tags to the template of the parent component.But here we have 100's of components, so is there any dynamic way to add them??
There is a Vue tag:
<component :is="myComponent"></component>
Where myComponent is component name or whole component object. You can create array with component names and render them with v-for dynamically.
See Vue Docs for details about dynamic component.
Yes there is a way to dynamically add components.
In general there is three things.
1. instantiate the component
2. mount the component
3. add it to the dom tree
var ComponentClass = Vue.extend(Component)
var instance = new ComponentClass() //instantiate
instance.$mount() //mount
this.$refs.container.appendChild(instance.$el) //add to dom
Please don't do this. The <component :is> trick is handy to know, but this is a bit like getting a wedding invitation with the name of the bride on a sticky label - not convincing. You need to commit yourself sometime. The template with lots of of <component :is> tags will be impossible to understand and maintain.
This worked!!!!!
<div v-for="comp in components" :key="comp">
<component :is="comp"></component>
</div>
I have a parent component with the following line
<router-view :product-id="productId" :data-source="attributes"></router-view>
depending on the context it renders one of the two components defined in the router config
path: 'parent',
component: Parent,
children:
[
{
path: 'edit',
component: Edit,
children:
[
{
path: 'attribute/:id',
component: Attribute,
}
]
},
{
path: 'grid',
component: Grid,
}
]
The thing is that the product-id and data-source props are available only in the Edit and Grid components. I'd like to have them available in the Attribute component as well as the Edit component is just a background with some static text (common for many components).
As a workaround I've created a propertyBag prop in the Edit component that passes an object down. That's the way I use it in the parent component
<router-view :property-bag="{ productId:productId, dataSource:dataSource, ...
and the Edit component
<router-view :property-bag="propertyBag"></router-view>
Is there a simpler way to achieve it ?
Vue $attrs is the new way to propagate props
From the Docs:
vm.$attrs
Contains parent-scope attribute bindings (except for class and style) that are not recognized (and extracted) as props. When a component doesn’t have any declared props, this essentially contains all parent-scope bindings (except for class and style), and can be passed down to an inner component via v-bind="$attrs" - useful when creating higher-order components.
For more information, see Vue.js API Reference - $attrs
Have you looked at vuex. It's really quite easy to use and allows you to store data for your entire app in a single data store. This means you don't have to keep passing data through props, you can just access variables set in the store.
Here is a link to vuex docs (What is Vuex)
https://vuex.vuejs.org
You have to declare the props and bind them to pass them to the child.
Have a look at https://v2.vuejs.org/v2/api/#v-bind for available options
specifically, this may be of interest
<!-- binding an object of attributes -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- but you can also... -->
<div v-bind="allProps"></div>
This means you can pass down the object, and have the child parse the appropriate props. This means that the child has to have the props defined in order to catch them. So what you may be able to do is, in the case of the parent, have :propBag="propBag" and inside edit, pass down v-bind="propBag", and that will use the correct props at the child level
for vue > 2.0
v-bind="$attrs" it's sufficient, or you can declare them at data(), with [this.$attrs]
Solution possible from Vue 2.2.0
provide / inject
This pair of options are used together to allow an ancestor component to serve as a dependency injector for all its descendants, regardless of how deep the component hierarchy is, as long as they are in the same parent chain.
https://fr.vuejs.org/v2/api/index.html#provide-inject
How to pass multiple Props Downstream to Components
Use case: Props that you only need on the n-th child components, you can simply forward downstream without having to define the same props all over again in each component.
Correction: v-bind="$attrs" works just fine. Just make sure the parent also uses v-bind="$attrs" and not v-bind="$attr" ('s' was missing) which was the error that made me think v-bind="{ ...$attrs }" was needed.
However, I think you should still be able to use v-bind="{ ...$attrs }" to access all previous attributes, even if parents didn't explicitly propagated them.
How to:
Based on Alexander Kim's comment, it must be v-bind="{ ...$attrs }".
... is needed to pass the attributes of the previous component (parent) as $attrs only passes the attributes of the current component.
v-bind="{ ...$attrs }"
You must pass all data via props to children components. You don't have to pass it as an object but Vue.js does require all data to be passed to children. From their documentation:
Every component instance has its own isolated scope. This means you cannot (and should not) directly reference parent data in a child component’s template. Data can be passed down to child components using props.
So you are doing it in the correct manner. You don't have to create an object, you are able to pass as many props as you would like but you do have to pass the from each parent to each child even if the parent is a child of the original "parent".