web-dev-qa-db-ja.com

インポートVue Webpackのコンポーネント

Hellopack VueアプリをWebpackでセットアップし、最初の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'

Main.jsとapp.vueのスクリプトセクションの両方で、使用してみました

<top-bar></top-bar>

運がなければ。

Vue docsのように、コンポーネントを適切に登録する方法が欠けていると思います。

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

しかし、vue-loaderでwebpackを使用する場合、何か別のことをする必要があると思います。

webpackvue.js
30
ThingWings

示したようにグローバルに登録することも、単一のコンポーネントで使用するためにローカルに登録する場合は、Vueインスタンスのcomponentsオブジェクトに追加する必要があります：

<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>
42
Jeff

以下に示すように、コンポーネントオブジェクトに適切な名前を付けることができます。

<template>
    <nav-bar></nav-bar>
</template>

<script>

    import TopBar from './TopBar.vue'

    export default {
        components: {
            'nav-bar': TopBar
        }
    }
</script>
5
Kevin Muchwat