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

Question

[Антон Антон]

Для использования vue совместно с bootstrap попробовал bootstrap-vue. в принципе, все заработало, хочу сделать "красоту".
При использовании vue-router компонент router-link рендерится в <a>
при использовании в шапке компонент b-nav-item рендерится в <li class="nav-item"><a class="nav-link">
Если руками сделать вместо b-nav-item

<li class="nav-item"><router-link class="nav-link">

- то все работает.
Я захотел сделать свой компонент b-router-link, который бы реализовывал это одним тегом.
вот такой компонент работает (без использования router-link):

Vue.component('b-router-link', {
  template: '<li class="nav-item"><a class="nav-link"><slot/></a></li>'
})

а такой - нет:

Vue.component('b-router-link', {
  template: '<li class="nav-item"><router-link :to class="nav-link"><slot/></router-link></li>'
})

Помогите сделать правильно :)

Answer 1

[Антон Антон]

Разобрался, правильный компонент такой:

Vue.component('b-router-link', {
  template: '<li class="nav-item"><router-link :to="to" class="nav-link"><slot/></router-link></li>',
  props: ['to']
})

использование:

<b-router-link to="/phones">Телефоны</b-router-link>