使用Webpack导入Vue组件

user1670407:

我使用Webpack设置了hello world Vue应用程序设置,并使初始App组件正常工作并安装到了机身上。尽管在该App组件中,我无法弄清楚如何使用自己制作的更多组件。

main.js

import Vue from 'vue'
import App from './app.vue'

new Vue({ 
    el: 'body',
    components: { App }
})

应用程序

<template>
    <div class="message">{{ message }}</div>
</template>

<script>
    export default {
        data () {
            return {
                message: 'Hello World'
            }
        }
    }
</script>

我努力了

import TopBar from './top-bar.vue'

然后在main.js和app.vue的脚本部分中尝试使用

<top-bar></top-bar>

没有运气。

我想我缺少如何正确注册组件的信息,例如在Vue文档中:

Vue.component('top-bar', TopBar);

但是我认为将Webpack与vue-loader一起使用时,我需要做一些不同的事情。

杰夫:

您可以像显示的那样在全球范围内注册它,或者如果要在本地注册以在单个组件中使用,则需要将其添加到componentsVue实例对象中:

<template>
    <top-bar></top-bar>
    <div class="message">{{ message }}</div>
</template>

<script>
    import TopBar from './top-bar.vue'
    export default {
        data () {
            return {
                message: 'Hello World'
            }
        },
        components: {
            TopBar
        }
    }
</script>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

热门标签

归档