Vue cliを使わないcdn版でのコンポーネントの書き方です。
いくつか書き方があり迷うので自分メモ的に投稿致します。
大きくわけてグローバル登録とローカル登録があります。
コンポーネントの書き方（グローバル登録）
コンポーネント名はHTMLタグになるもの
テンプレート名は直接HTMLタグを書くか、HTML内に記述したx-templateの対応するidを設定
//コンポーネント１
Vue.component('コンポーネント名A', {
template: 'HTMLタグを記述、もしくはテンプレートのid',
data: function() {
return {
number: 12
}
}
})
//コンポーネント２
Vue.component('コンポーネント名B', {
template: 'HTMLタグを記述、もしくはテンプレートのid',
data: function() {
return {
msg: 'hello!'
}
}
})
//HTML内で表示したいブロック
new Vue({ el: '#app' })
new Vue({ el: '#app2' })
グローバルなので#app、#app2どちらのブロックでもすべてのコンポーネント名がHTMLタグとして使用できます。
<div id="app">
<コンポーネント名A></コンポーネント名A>
</div>
<div id="app2">
<コンポーネント名A></コンポーネント名A>
<コンポーネント名B></コンポーネント名B>
</div>
コンポーネントの書き方（ローカル登録） 推奨
定義したコンポーネントの定数名を、new Vue内で使いたいel:に使いたいタグ名で登録する
//コンポーネントを定義
const 定数名 = {
template: 'HTMLタグを記述、もしくはテンプレートのid',
data: function() {
return {
msg: 'キーワードを入力してください',
}
}
}
new Vue({
el: 'HTML内の使いたいブロックをCSSセレクタで記述',
components: {
//上のelでマウントしたHTML内のブロックに
//下の 'HTMLタグ名'：定数名 を使います宣言
'search-component': Search
}
})
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. - did you register the component correctly? For recursive components, make sure to provide the "name" option.
というエラーを吐かれたときはコンポート名が間違っていないか確認してください。
まとめ
基本的にローカル登録を推奨
多くの場合、グローバル登録は理想的ではありません。例えば Webpack のようなビルドシステムを利用しているときに、グローバルに登録した全てのコンポーネントは、たとえ使用しなくなっても、依然として最終ビルドに含まれてしまうことでしょう。これは、ユーザがダウンロードしなくてはならない JavaScript のファイルサイズを不要に増加させてしまいます。
このような場合に、コンポーネントを素の JavaScript オブジェクトとして定義することができます。
ローカル登録手順まとめ
- constでコンポーネントを定義
- templateを作成（HTML内にx-templateかコンポーネントのtemplate:に直接記述）
※vue cli で使える.vueファイルだとファイル毎にコンポーネントをまとめて書くやり方が使える - template:でテンプレートを定義（直接記述でない場合x-templateのidを指定する）
- data、methodsなどオプションを定義
※dataはコンポーネント側に記述する（new Vueの方にdataを記述した場合反映されない感じ？） - new Vue で使いたいブロックをel:に、使いたいコンポーネントをcomponents:に
- el:複数登録不可、components:は複数登録可能
- components:に登録したコンポーネントだけがそのel:内で使える