在 Vue.JS 中的父组件内创建子组件

Question

我想弄清楚如何在 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 应用程序中，我主要使用内联模板。我会特别感谢任何工作样本。谢谢！

更新

感谢 Linus 在下面的回答。看来我需要这些更改才能在我的 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>

Answer 1

您在主实例中本地注册了 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>

..或在您的 main.js 文件中使用 Vue.component('child', Child) 全局注册。然后随处可用。

在 Vue.JS 中的父组件内创建子组件

Creating a child component within a parent component in Vue.JS

javascript

laravel

vue.js

laravel-spark

vue-component