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

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

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

サンプルコード

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

見方・書き方

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

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

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

 

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

コンポーネント登録

この部分、importの後のテキスト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