【发布时间】：2016-11-14 00:57:15
【问题描述】：
我试图弄清楚如何在 VueJS 中将一个组件放入另一个组件中。例如，像这样的东西，不幸的是它不起作用（子组件似乎什么都不做）：
http://www.webpackbin.com/NyI0PzaL-
我对使用 inline-templates 和使用如上所示的 .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>
【问题讨论】：
-
您的代码是正确的。你是通过 vueify 扩展运行它吗？你的 webpackbin 和这里的代码不一样。
-
将你的子导入移动到 app.vue 并为子添加组件哈希。
标签： javascript laravel vue.js laravel-spark vue-component