Vue.js ver2 component

コンポーネント

スコープ	グローバル	ローカル	ローカル
書き方読みこみ方	Vue.component('c-name', { template: `` }) new Vue({})	`let comA = {} new Vue({ components: { 'com-a':ComA } })`	`import comA from './ComA.vue' export default { components: { ComA } }`
拡張子	html, js	html, js	.vue
ファイル内	script	script	teplate,script, style
環境	CDN	CDN	VueCLI
特徴	ほぼ使わない	責務の分離（役割分担）	責務の分離（役割分担）

グローバルコンポーネント

インスタンス化の前に書く
template内はバッククォート（`）
template内は単一ルートが必須

componentのpropsプロパティ

＊HTMLタグの属性の様に自由に設定できる
＊propsの値をリアクティブに扱う場合はdataプロパティもしくはcomputedで値を渡す。
＊HTMLタグで仮想DOMに指定する場合はケバブケースで表記する
＊親から子コンポーネントへのpropsの受け渡しは可能だが、子から親に渡す場合はpropsのみではできない
＊タイプがObjectかArrayでdefault設定する場合は関数で行う必要がある。（JavaScriptは参照渡しなので親側のプロパティの値も変わってしまうため）

$emitカスタムイベント

// 親コンポーネント
@custome-event="親のメソッド名"
methods: {
    親のメソッド名(e) {
        console.log(e)
    }
}
// 子コンポーネント
@click="子のメソッド名"
methods: {
    子のメソッド名(e) {
        this.$emit('custom-event', 値)
    }
}

イベントバス

親子孫のコンポーネント関係があるときに孫から親コンポーネントに対して値の受け渡しをする方法。
https://v2.ja.vuejs.org/v2/api/#vm-on

Atomic Design

https://atomicdesign.bradfrost.com/chapter-2/#atomic-design-is-for-user-interfaces

slot

https://v2.ja.vuejs.org/v2/guide/components-slots#%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%97%E4%BB%98%E3%81%8D%E3%82%B9%E3%83%AD%E3%83%83%E3%83%88