The image I use below are svg component loaded with vue-svg-loader (see app.vue)
I have 2 components parent and child.
The parent use the child and display an image from the child with a text.
The child can be used without the parent and only display an image.
Both use a named slot to display the image, the issue is I want to pass a named slot from the parent component to the child one, but seems like to not work the way I want with vuejs named slot and start to be very confusing, is there another way to solve this issue ?
Parent.vue
<template>
<child>
<label>Text with image</label>
<slot name="img">
</child>
<template>
Child.vue
<template>
<slot name="img">
<template>
App.vue
<template>
<parent>
<mySvg slot="img"/>
</parent>
<template>
<script>
import mySvg from 'pathToSvg';
export default {
components: {
mySvg,
}
}
</script>
Try this for the Parent component
<template>
<child>
<label>Text with image</label>
<slot slot="img" name="img">
</child>
<template>
Related
I'm working on a Vue2 app.
It consists of a base template (App.vue) that looks like this:
<template>
<v-app>
<div id="app">
<NavigationBar></NavigationBar>
...
</div>
</v-app>
</template>
And various components (i.e., Home.vue, Login.vue, Navigation.vue etc...)
Being part of the main template, the NavigationBar is displayed in each component.
I would love to remove the NavigationBar only in the Login.vue component.
What could be the best way to achieve this?
Thanks
I understand paradigm "Page-component" but what if I have a page that renders component, how do I call another component inside this component? Currently nuxtjs does not allow me do it. I can not stick to standart "page-component" scheme as I am bulding cart which calls cart-items.
Say If a cart component which is called by page looks like this, how would it call cart-item component inside it?
<!---- cart component called from index.vue --->
<template>
<div>
<Cart-item></Cart-item> < ---------- This doesn't work.
</div>
</template>
<script>
export default {
props: ['items']
}
</script>
I managed it the standard way:
<template>
<div>
<CartItem></CartItem>
</div>
</template>
<script>
import CartItem from '../components/Cart-item'
export default {
props: ['items']
}
</script>
Since nuxtjs auto-registers all components wonder if there is more graceful way.
EDIT: as promised, here is an example on how to pass some content to a component from another one thanks to slots. This is totally working in any Nuxt page ofc.
NestedContent.vue
<template>
<div>
<p>Here is the NestedContent component and below is a slot passed to ParentWithSlots' component</p>
<hr />
<parent-with-slots>
<!-- <template #default> // this one can be omit since we do use the default slot here -->
<p>This content is inserted into the component ParentWithSlots</p>
<!-- </template> -->
</parent-with-slots>
</div>
</template>
ParentWithSlots.vue
<template>
<div>
<p>xxxxxxxxxxx ParentWithSlots' content before slot xxxxxxxxxxx</p>
<slot>Default content in case none is provided</slot>
<p>xxxxxxxxxxx ParentWithSlots' content after slot xxxxxxxxxxx</p>
</div>
</template>
Here is how it looks
PS: you may also give a try to layouts, it can be useful for overall positioning of some of your components visually.
If your components are in the components directory, you can set components: true in your nuxt.config.js and have access to it pretty much anywhere without any additional step with the <cart-item></cart-item> syntax.
More details here: https://nuxtjs.org/blog/improve-your-developer-experience-with-nuxt-components/
I have created two web components that are nested together. The main problem that I am facing is when I try to render the child component, everything from the parent gets overlapped.
I think that the issue is that both parent component and child component are rendering <slot/>.
As you can see the parent component renders <slot></slot>. And the child component renders each of its slots by there name as well, the only "solution" that I found is to set shadow to true(shadow:true) in the child element, that way only the child <slot/> is shown and it doesn't get overlapped by the parent. But that is not working for me because inside my child component I would like to render another component, but since this is shadow DOM it does not show anything.
Any ideas?, thanks.
<parent-component>
<child-component>
<div slot='title'>title</div>
<div slot='subtitle'>subtitle</div>
</child-component>
</parent-component>
#Component({
tag: 'child-component'
shadow: false
})
export class ChildComponent{
//my-logic
render(){
return(
<div>
<slot name='title'/>
<slot name='subtitle'/>
<external-component></external-component>
</div>
)}
}
}
#Component({
tag: 'parent-component'
shadow: false
})
export class ParentComponent{
//my-logic
render(){
return(
<div>
<slot></slot>
</div>
)}
}
}
talents. I want to create beautiful button for vue. But I have a problem. I want to pass class attribute to child from parent component easily.
Parent component is like this:
<!-- parent component -->
<template>
<custom-element class="wanted-class">
<span slot="custom-body">
Some Effects or text
</span>
</custom-element>
</template>
and "custom-element" component is
<template>
<div id="custom-element">
Some elements or text
<slot name="custom-body">
Some default text
</slot>
</div>
</template>
<script>
export defatult{ ...
I really want the root element in child ( $("#custom-element") for jQuery expression) to have "wanted-class" from parent. Is it possible? or it's too easy?
In essence, I'm looking to be able to render content from a component's declaration in the actual component itself.
Another component:
<Page>
<h1>A title</h1>
<p>An amazing paragraph</p>
</Page>
Page component:
<template>
<Header/>
<!-- Here is where I want to render the title & paragraph-->
<Footer/>
</template>
Vue does a similar function with the router's view, by exposing <router-view/> in the app's entry point. That's essentially what I would like to do except throughout components.
Is this at all possible?
You just need to add <slot/> there:
<template>
<Header/>
<slot></slot>
<Footer/>
</template>
Check out: https://v2.vuejs.org/v2/guide/components-slots.html