Создание дочернего компонента в родительском компоненте в Vue.JS

Я пытаюсь понять, как сделать один компонент внутри другого в VueJS. Например, что-то вроде этого, что, к сожалению, не работает (кажется, что дочерний компонент ничего не делает):

http://www.webpackbin.com/NyI0PzaL-

Я в равной степени заинтересован в том, чтобы делать это с использованием встроенных шаблонов, а также с использованием метода расширения файла .vue, как показано выше.

Вот код из неработающего примера выше:

main.js

import Vue from 'vue'
import App from './App.vue'
import Child from './Child.vue'

new Vue({
  el: 'body',
  components: { App, Child }
})

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <app></app>
    <script src="main.js"></script>
  </body>
</html>

App.vue

<template>
  <div>
      <h1>{{ parent_msg }}</h1>
      <child></child>
  </div>
</template>

<script>
export default {
  data () {
    return {
      parent_msg: 'Hello From the Parent!'
    }
  }
}
</script>

Child.vue

<template>
  <h1>{{ child_msg }}</h1>
</template>

<script>
export default {
  data () {
    return {
      child_msg: 'Hello From the Child!'
    }
  }
}
</script>

Несмотря на то, что этот пример размещен на webpackbin.com, в двух проектах, где я хотел бы его использовать, я использую Laravel в одном и Laravel Spark в другом. В простом приложении Laravel я в основном использую файлы .vue, а в приложении Laravel Spark я в основном использую встроенные шаблоны. Буду особенно признателен за любые рабочие образцы. Спасибо!

ОБНОВЛЕНИЕ

Спасибо Линусу за его ответ ниже. Похоже, мне нужны эти изменения для глобальной регистрации дочернего компонента в моем файле main.js:

import Vue from 'vue'
import App from './App.vue'
import Child from './Child.vue'
Vue.component('child', Child);

new Vue({
  el: 'body',
  components: { App, Child }
})

В качестве альтернативы, чтобы дочерний компонент оставался локальным для использования в родительском, я мог бы изменить родительский компонент (App.vue) следующим образом:

<template>
  <h1>{{ parent_msg }}</h1>
  <div>
      <child></child>
  </div>
</template>

<script>
import Child from './Child.vue';
export default {
  components: {Child},
  data () {
    return {
      parent_msg: 'Hello from the parent component!'
    }
  }
}
</script>

javascript vue.js laravel vue-component laravel-spark
person    schedule 11.07.2016    source источник
comment
Ваш код правильный. Вы запускаете его через расширение vueify? Ваш webpackbin здесь не тот код.   -  person Jeff    schedule 12.07.2016
comment
Переместите дочерний импорт в app.vue и добавьте туда хэш компонента для дочернего элемента.   -  person vbranden    schedule 12.07.2016

Ответы (1)


arrow_upward
10
arrow_downward

Вы зарегистрировали компонент Child локально в основном экземпляре, поэтому он недоступен в App.vue

Удалите его из основного экземпляра и добавьте в App.vue:

App.vue

<template>
  <div>
      <h1>{{ parent_msg }}</h1>
      <child></child>
  </div>
</template>

<script>
import Child from './child.vue'

export default {
  data () {
    return {
      parent_msg: 'Hello From the Parent!'
    }
  },
  components: {child: Child}
}
</script>

..или зарегистрируйте его глобально с помощью Vue.component('child', Child) в файле main.js. Тогда он доступен везде.

person Linus Borg    schedule 12.07.2016
comment
спасибо за Ваш ответ. Я проверю это, когда у меня будет возможность. - person user3089840; 12.07.2016
comment
Кажется, ваш ответ работает, по крайней мере, на WebpackBin. Надеюсь, теперь я смогу заставить его работать и в Laravel! - person user3089840; 13.07.2016
comment
Отличное решение, не могли бы вы рассказать мне, как отображать parent_msg для дочернего компонента и наоборот? - person raju; 10.11.2016
comment
stackoverflow.com/users/4527328/raju-shrestha - проверьте это для связи между вложенными компонентами laracasts.com/discuss/channels/vue/ - person Artistan; 06.07.2017