Добавить компонент в компонент vue.js?

Недавно начал изучать Vue.js , плюс ко всему скачал готовую сборку , основной компонент у меня в приложении это App.vue:
<template>
    <div class="page">
        <PageHeader></PageHeader>
    </div>
</template>

<script>
export default {
  name: 'page'
}
</script>

<style lang="sass">

</style>

Как понятно , в него хочу добавить компонент header.vue:
<template>
  <header class="header">
      <div class="wrapper">
          <div class="header-container">
        </div>
      </div>
  </header>
</template>

<script>
export default {
    name: 'header'
}
</script>

<style lang="css">
</style>

PageHeader я зарегистрировал в main.js:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './page'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
Vue.component('PageHeader',{
    template: '.header'
});
new Vue({
  el: '.page',
  router,
  template: '<App/>',
  components: { App }
})


Что я делаю не так и почему компонент не добавляется?
  • Вопрос задан
  • 4850 просмотров
Решения вопроса 1
@Artem0071
Безработный mr. Junior
Вы все делаете не так :)

Советую Вам изучить Vue cli

Чтобы добавить компонент в компонент, необходимо использовать , а в роутах уже прописывать сами компоненты
Либо чтобы вставить отдельно компонент в компонент, нужно в родительском компоненте прописать что то типа:
import myHeader from './header.vue'
<script>
export default {
    components: {myHeader} // и вызывать этот компонент уже как <my-header></my-header>
}
</script>


-----

В вашем случае родительский компонент должен иметь следующий вид:
<template>
    <div class="page">
        <page-header></page-header>   // <-не забудь изменить
    </div>
</template>

<script>
import PageHeader from './header.vue'
export default {
  name: 'page',
  components: { PageHeader  }
}
</script>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы