【vue.js】単一ファイルコンポーネントってどうやるの？

vue-cliをおためしで使ってみたけど、コンポーネントを.vueに分ける方法が分からない！

ということで30分くらい頭をひねったのでメモ。

サンプルコード

<template>
    <div id="hair">
        テストコンポーネント
    </div>
</template>

<script>
</script>

<style scoped lang="scss">
</style>

//コンポーネント登録
import HairComponents from './components/parts/Hair'
Vue.component('hair-component',HairComponents);

ひとまずコンポーネント体験をしたいだけならこれで動きます。

見方・書き方

コンポーネントの.vueファイル

<template></template>の直下に要素をひとつだけ設置すればOK。フォルダ階層などはご自由に。

直下の要素をひとつだけというのは……以下のようなものはだめだということ。

<template>
    <div id="hair">
        テストコンポーネント
    </div>
    <div>
        aaa
    </div>
</template>

 

以下のような書き方は、直下の要素は一つだけなのでOK。

<template>
    <div id="hair">
        テストコンポーネント
        <div>
            aaa
        </div>
        <div>
            bbb
        </div>
    </div>
</template>

コンポーネント登録

import HairComponents from '/components/parts/Hair'

この部分、importの後のテキストHairComponentsはご自由な分かりやすい名前で。

Vue.component('hair-component',HairComponents);

この部分は、’hair-component‘が、ほかのテンプレート内で使うタグ名。
<hair-component/>って感じで書くとそこに.vueファイルの<template></template>間が出てきます。

そのあとのHairComponentsは先ほどimportのところでつけた名前で。

---

※コンポーネント登録は、new Vueより前に書かないと動かない。

 

参考

https://jp.vuejs.org/v2/guide/components-registration.html#%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0

https://qiita.com/shosho/items/115b371736207078289c