use*_*840 6 javascript laravel vue.js laravel-spark vue-component
我试图弄清楚如何在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应用程序中,我主要使用内联模板.我特别感谢任何工作样品.谢谢!
UPDATE
感谢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>
Lin*_*org 10
您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文件中全局注册它.然后随处可用.
| 归档时间： |
|
| 查看次数： |
12270 次 |
| 最近记录： |