создать глобальный компонент с дочерними элементами, используя несколько реквизитов в vue и nuxt js

Question

Я пытаюсь создать глобальный компонент с детьми и несколькими опорами для многократного использования.Я не знаю, где я делаю ошибку.вот мой файл компонента

SectionHeading.vue

<script>
import Vue from 'vue'
import Heading from '~/components/Heading.vue'

  Vue.component('SectionHeading', {
    props: {
      heading: [String],
      content: [String]
    },
    template: '<div><Heading>{{ heading }}</Heading><p>{{ content }}</p></div>'
    // this may be not necessary
  })

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

<template>
  <b-container class="text-center">
      <span><img src="~/assets/images/Icon.svg" alt="" /></span>
      <Heading :level="3">{{ heading }}</Heading>
      <p>{{ content }}</p>
  </b-container>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>

Вот мой файл index, куда я импортирую SectionHeading компонент

index.vue

<template>
  <section class="">
    <SectionHeading heading="About Me" content="lorem ipsum" />
  </section>
</template>

<script>
  import SectionHeading from '~/components/SectionHeading.vue'
  export default {
    components: {
      SectionHeading
    },
    data () {
      return {
        title: 'Home'
      }
    },
    head () {
      return {
        title: this.title
      }
    }
  }
</script>
<style>

</style>

я хочу, чтобы он отображался, как показано ниже

<div class="contaniner">
  <span><img src="images/Icon.svg" alt="" /></span>
  <h3>About Me</h3>
  <p>lorem ipsum</p>
</div>

что я получаю

<div class="container">
 <span><img src="images/Icon.svg" alt="" /></span>
 <h3></h3>
 <p></p> 
</div>

ошибка, которую я получаю

Answer 1

Я думаю, вы идете по этому поводу и пытаетесь создать глобальный компонент «Vue way», когда вам действительно нужно сделать это «Nuxt way».

«Nuxt way» будет выглядеть примерно такthis:

//components/SectionHeading.vue
<script>
import Heading from '~/components/Heading.vue'

export default {
  props: ['heading', 'content'],
  components: {
    Heading
  }
}
</script>

<template>
  <b-container class="text-center">
      <span><img src="~/assets/images/Icon.svg" alt="" /></span>
      <Heading :level="3">{{ heading }}</Heading>
      <p>{{ content }}</p>
  </b-container>
</template>

<style scoped lang="scss">

</style>

Затем вы хотите создать файл в каталоге плагинов, назовем его global.js

//plugins/global.js
import Vue from 'vue'
import SectionHeading from '~/components/SectionHeading.vue'

Vue.component('section-heading', SectionHeading)

, а затем зарегистрировать этот плагин в nuxt.config.js

//nuxt.config.js
...
plugins: [ '@/plugins/global.js' ]
...

, и вы должны быть правы использовать его на любой странице как

<section-heading heading="blah" content="blah more"/>