我有一个你好的世界与Webpack Vue应用程序设置,并有初始的应用程序组件工作,并挂载到身体。尽管在这个App组件中,我不知道如何使用更多我制作的组件。
main.js
import Vue from 'vue'
import App from './app.vue'
new Vue({
el: 'body',
components: { App }
})
app.vue
<template>
<div class="message">{{ message }}</div>
</template>
<script>
export default {
data () {
return {
message: 'Hello World'
}
}
}
</script>
我试过了
import TopBar from './top-bar.vue'
在app.vue的main.js和script部分中,然后尝试使用
<top-bar></top-bar>
如果没有运气的话。
我想我错过了如何正确注册组件,比如在Vue文档中:
Vue.component('top-bar', TopBar)
但我认为,在使用带有vue-loader的webpack时,我需要做一些不同的事情。
发布于 2016-02-16 03:04:34
您可以像展示的那样全局注册它,或者如果您想在本地注册它以便在单个组件中使用,您需要将它添加到Vue实例的components
对象中:
<template>
<top-bar></top-bar>
<div class="message">{{ message }}</div>
</template>
<script>
import TopBar from './top-bar.vue'
export default {
components: {
TopBar
},
data () {
return {
message: 'Hello World'
}
}
}
</script>
发布于 2017-09-25 14:23:25
您可以在components对象中为它指定一个合适的名称,如下所示
<template>
<nav-bar></nav-bar>
</template>
<script>
import TopBar from './TopBar.vue'
export default {
components: {
'nav-bar': TopBar
}
}
</script>
https://stackoverflow.com/questions/35416970
复制相似问题