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

Question

[Smeecy Smeecy]

Недавно начал изучать 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 }
})

Что я делаю не так и почему компонент не добавляется?

Comments

[alvvi]

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

Vue.component('PageHeader',{
    template: '.header'
});

а нужно было

import Header from './components/header.vue'
Vue.component('PageHeader',{
    template: '<Header />',
    components: { Header }
});

Answer 1

[Artem0071]

Вы все делаете не так :)

Советую Вам изучить 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>

Comments

[Smeecy Smeecy]

Спасибо!