laravel 在 Vue.JS 的父组件中创建子组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38317770/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a child component within a parent component in Vue.JS
提问by user3089840
I am trying to figure out how to make one component inside of another one in VueJS. For instance, something like this, which unfortunately does not work (the child component appears to do nothing):
我想弄清楚如何在 VueJS 中将一个组件放入另一个组件中。例如，类似这样的事情，不幸的是它不起作用（子组件似乎什么都不做）：
http://www.webpackbin.com/NyI0PzaL-
http://www.webpackbin.com/NyI0PzaL-
I am equally interested in doing this using inline-templates as much as by using the .vue file extension method as shown above.
我对使用内联模板和使用 .vue 文件扩展名方法同样感兴趣，如上所示。
Here is the code from the non-working example above:
这是上面非工作示例中的代码：
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
索引.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
儿童.vue
<template>
<h1>{{ child_msg }}</h1>
</template>
<script>
export default {
data () {
return {
child_msg: 'Hello From the Child!'
}
}
}
</script>
Even though this above example is hosted on webpackbin.com, in the two projects where I would like to use this, I am using Laravel in one along with Laravel Spark in the other. In the plain Laravel app, I'm primarily using .vue files, and in the Laravel Spark app, I'm primarily using inline-templates. I'd be especially grateful for any working samples. Thanks!
尽管上面的示例托管在 webpackbin.com 上，但在我想使用它的两个项目中，我在一个项目中使用 Laravel，在另一个项目中使用 Laravel Spark。在普通 Laravel 应用程序中，我主要使用 .vue 文件，而在 Laravel Spark 应用程序中，我主要使用内联模板。我会特别感谢任何工作样本。谢谢！
UPDATE
更新
Thanks to Linus for his answer below. It appears I need these changes to register the child component globally in my main.jsfile:
感谢 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 }
})
Alternatively, in order to keep the child component local to be used within the parent, I could change the parent component (App.vue) as follows:
或者，为了将子组件保持在本地以在父组件中使用，我可以按如下方式更改父组件 ( 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>
回答by Linus Borg
You registered the Childcomponent locally in the main instance, so it is not available in App.vue
你Child在主实例本地注册了组件，所以在App.vue中是不可用的
Remove it form the main instance and add it to 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>
..or register it globally with Vue.component('child', Child)in your main.js file. Then it's available everywhere.
.. 或Vue.component('child', Child)在您的 main.js 文件中全局注册它。然后它无处不在。
