Как переиспользовать компонент?

Question

[vladislavprozorovskiy]

есть компонент Sidebar.vue описан таким образом

<template>
<div class="sidebar">
<a href="#" @click.prevent="sidebarShow = !sidebarShow" class="sideBarToggle" v-bind:class="{ active: sidebarShow }">
<i class="fa fa-cog fa-spin fa-3x fa-fw" style="font-size:18px"></i>
</a>
<transition name="slide">
  <menu v-show="sidebarShow" class="sidebar-content">
    Контент...
  </menu>
</transition>
</div>
</template>
<script>
module.exports = {
data:function() {
return {
  'sidebarShow': false
      }
    }
    
  }
</script>


<style>
.slide-leave-active,
.slide-enter-active {
  transition: all 0.25s;
}
.sideBarToggle {
position:fixed;
top:50%;
right:0;
z-index:2;
color:white;
background-color:#FF7588;
display:block;
height:50px;
width:54px;
cursor:pointer;
line-height: 54px;
margin: 0 auto;
text-align:center;
}
.sideBarToggle.active {
 right:299px;
 transition:all 0.3s;
}
.sideBarToggle:hover {
color:white;
background-color:#ff3353;
}
.sidebar-content{
border-left: 1px solid #CFD8DC !important;
position:fixed;
right:0;
width:300px;
height:100vh;
background-color:#253858;
z-index:1;
margin:0;
}
.slide-enter {
  transform: translate(100%, 0);
}
.slide-leave-to {
  transform: translate(100%, 0);
}
</style>

я его подключаю и регестрирую в app.js так:

const vm = new Vue({
  el:'#sidebar',
  template:'<button-sidebar/>',
  components:{'button-sidebar':Sidebar}
})

есть два вопроса. Первый - могу ли я теперь использовать его на странице как

<div class="super-app">
<button-sidebar />

</div>

?
И второй вопрос как сделать так, чтобы внутри элемента можно было писать какие-то теги и все это запихнуло в контент?Например так

<button-sidebar>
<h1>Super app </h1>
<p> ... </p>

Буду очень благодарен за ответы

Answer 1

[0xD34F]

могу ли я теперь использовать его на странице как...

А вы попробуйте.

как сделать так, чтобы внутри элемента можно было писать какие-то теги и все это запихнуло в контент?

Используйте слоты.

Comments

[vladislavprozorovskiy]

попробовал, вот так :

<template>
<div>
<Sidebar>
Vladislav
</Sidebar>
</div>
</template>

<script>

import Sidebar from './Sidebar.vue'

export default {
components:{Sidebar}
}
</script>

Как нормально подключает, но не подтягивает стили, можете подсказать в чем проблема?Буду очень благодарен

[0xD34F]

vladislavprozorovskiy, нет, сходу не подскажу. Но если воспроизведёте свою проблему в песочнице (codepen, например) - могу попробовать разобраться.