suppose we have a component like this.
<template>
<div class=" ">
<div class="flex-grow">{{title}}</div>
<div class=" p-5">
<!-- want to show here -->
</div>
</div>
<script>
export default {
props: ['title'],
mounted() {
console.log('Component mounted.')
}
}
</script>
i try this
<comp :title="'here'">
<h1> this is </h1>
</comp>
i want to show html b.w vue component tag, like we do in react.
how we can achieve this
If I understand the question, you're looking to create a component that can accept child elements. In order to do this, use <slot></slot> in your template where you'd like child elements to be inserted. Child elements can be other components or HTML.
See the reference for more thorough details.
In your example:
<template>
<div class=" ">
<div class="flex-grow">{{title}}</div>
<div class=" p-5">
<slot></slot>
</div>
</div>
</template>
Related
I'm trying to get a v-for cycle with background images. My intention is to have for columns each containing a different background image. Is there something wrong here? :(
Please note also photos it's an array imported with props. This is a component template.
<template>
<div class="row">
<div
v-for="photo in photos"
:key="photo"
class="col-3"
style="background-image: url({{photo.url}})"
>
Need to see photo here
</div>
</div>
</template>
<script>
export default {
props: ["photos"],
};
</script>
I'd use template literals with the :style shorthand for v-bind:style
<template>
<div class="row">
<div
v-for="(photo, index) in photos"
:key="index"
class="col-3"
:style="`background-image: url(${photo.url})`"
>
Need to see photo here
</div>
</div>
</template>
Refer to Binding Inline Styles
<div
v-for="photo in photos"
:key="photo"
class="col-3"
v-bind:style="{background-image: 'url(' + photo.url + ')'}"
>
Need to see photo here
</div>
I have a html structure like this:
<template>
<div>
<div class="container">
<somecontent>
<someothercontent>
</div>
</div>
</template>
However, depending on the layout, I want to remove the container div so the structure looks like this:
<template>
<div>
<somecontent>
<someothercontent>
</div>
</template>
Note that the div is completely added or removed, not just the class name. v-if doesn't work here because it would also show or hide the content that is enclosed by the div. What's the simplest solution for that?
You can use
v-if ... v-else
<template>
<div v-if="condition">
<div class="container">
<somecontent>
<someothercontent>
</div>
</div>
<div v-else>
<somecontent>
<someothercontent>
</div>
</template>
I have two templates on components and one flag.
<template v-if="mainPage">
<div class="col-md-12">
<h1>1 page</h1>
</div>
</template>
<template v-else>
<div class="col-md-12">
<h1>2 page</h1>
</div>
</template>
export default {
data () {
return {
text : '',
mainPage: true,
}
},
but default include second template. why?
First of all, when creating a vuejs you are only allowed one root element per component, so without the v-else part your component wouldnt work, unless you change template to div, and create one parent template:
If you don't want to use v-if you can just use v-show as:
<template v-show="mainPage">
<div class="col-md-12">
<h1>1 page</h1>
</div>
</template>
<template>
<div class="col-md-12">
<h1>2 page</h1>
</div>
</template>
This will not work for templates though. Because you can not have two templates in vuejs components
I have a vue component Jumbotron.vue:
<template lang="html">
<div class="jumbotron" style="border-radius:0px; color:#fff;">
<div class="container">
</div>
</div>
</template>
And other page component Main.vue:
<template>
<div class="root">
<navbar></navbar>
<jumbotron>
<h1 class="display-4">I want to add here, to the jumbotron's div container some h1 and paragraph</h1>
<p class="lead ">Like this paragraph</p>
</jumbotron>
<words></words>
</div>
</template>
But i cant add content to the jumbotron, because its wrong. I dont want to add content(p and h1) inside of the Jumbotron.vue, because i want to use Jumbotron.vue more than 1 time with different content inside it. Is this possible?
This is done with slots.
<template lang="html">
<div class="jumbotron" style="border-radius:0px; color:#fff;">
<div class="container">
<slot></slot>
</div>
</div>
</template>
Everything you put inside the jumbotron component in the parent will be rendered in the slot.
Is there any way to implement the following carousel in Vue2. Link :
Image Carousel
// Parent component
<div class="col">
<slider>
<slide v-for="intro in compOpts.blockIntro">
<block-intro :compOpts="{ props: { wrapper: true, bg: false } }">
<p v-html="intro.title"></p>
<div slot="content" v-html="intro.content" class="blockIntro__content"></div>
</block-intro>
</slide>
</slider>
</div>
// Slider component
<div class="slider__container">
<slot></slot>
</div>
// Slide component
<div>
<slot></slot>
</div>
// BlockIntro component
<div class="col--h100" :class="{ 'bg--darkDark': compOpts.props.bg, 'col': !compOpts.props.wrapper }">
<div class="col col__blockIntro" :class="{ 'col__blockIntro--spaced': compOpts.props.spaced }">
<div class="col col__blockIntro__introQuote">
<slot></slot>
</div>
<slot name="content"></slot>
</div>
My Slide component is giving me the BlockIntro component template and div.col--h100 is the first/parent child element inside Slider. Now I'm trying to add an visible class to div.col--h100 from the Slider component. I consoled the Vnode using $slots but can't change the value in $slots.$elm.className
Please help.