<div id="app">
<comp1 :content="info">
</comp1>
<comp1 :content="info">
<h1 class="redTitle" >This is Custom Title</h1>
</comp1>
<comp1 :content="info">
<img slot="img" src="https://images.unsplash.com/photo-1529416272270-05ffe151a74c?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b006e47d690b0a651bfbda4201c55b46" class="small_img" alt="This is a Custom image"/>
</comp1>
<comp1 :content="info">
<div slot="autor">autor:{{author}}</div>
</comp1>
<comp1 :content="info">
<template slot="content" slot-scope="slotProps">
<div>
<span>{{slotProps.content}}</span>
</div>
</template>
</comp1>
<comp1 :content="info">
<template slot="content" slot-scope="slotProps">
<div>
<span>{{slotProps}}</span>
</div>
</template>
</comp1>
</div>#app{
display:flex;
flex-driection:row;
justify-content:space-around;
flex-wrap: wrap;
}
.com1{
margin:10px;
}
.redTitle{
color:#C62828;
}
.small_img{
width:300px;
}let com1={
props:['content','imgpath'],
template:
`<div class="com1">
<slot>
<h1>This is Title</h1>
</slot>
<slot name="img">
<img src='https://images.unsplash.com/reserve/E4A3cJpCQWKUptiXz8sU_IMG_3526.JPG?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=c43ba9df40613009c3dbab43b1ad4121' class="small_img" alt="this is image demo"/>
</slot>
<slot name="autor"></slot>
<slot name="content" :content="content" :flag="true">
<p>{{content}}</p>
</slot>
</div>`,
};
let vm=new Vue({
el:"#app",
data:{
info:'This is content',
author:'Vigo',
},
components:{
comp1:com1,
}
});
External CSS
This Pen doesn't use any external CSS resources.