#43 Vue.jsアウトプット

こんにちは、hiroです。
今年も梅雨の季節がきましたね。個人的にはジメジメするし、暑いしで苦手な時期でございます。今年の梅雨入りは地域によっては3週間程度早いみたいですね。

ちなみに、梅雨はなぜ起きるのかを軽く調べてみました。
・日本の南方にある "小笠原気団" は6月になると必ず日本の近くにくる。
・北日本のあたりには "オホーツク海気団" というものがある。
・いずれも水分をたくさん含んだ "気団" （様々な性質を持った空気の塊）
・"小笠原気団" と"オホーツク海気団" が日本の上で押し合いを始める。
・気団の間に東西に "梅雨前線" という境目が出来て停滞する。
・冷たい空気と温かい空気が押し合うため、雨をふらす原因となる。
みたいです。勉強になりました😃　
何の脈絡も無いですがアウトプットはじめます！笑

ローカルコンポーネント登録

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

・コンポーネントを素のJavaScriptオブジェクトとして定義出来る。

new Vue({
　　el: '#app',
　　components: {
    　　'component-a': ComponentA,
    　　'component-b': ComponentB
　　}
})

・ "components"  オプション内に使いたいコンポーネントを定義する。
・オブジェクトのプロパティは、キーは "カスタム要素" の名前、値は "コンポーネントのオプションオブジェクト" になる。

var ComponentA = { /* ... */ }

var ComponentB = {
　　components: {
　　　　'component-a': ComponentA
　　},
　　// ...
}

・ローカル登録されたコンポーネントは、"他のサブコンポーネント内では使用出来ない" 事に注意する。
・ComponentA を ComponentB 内で使用可能にしたいときは、上記のように使う。

import ComponentA from './ComponentA.vue'

export default {
　　components: {
　　　　ComponentA
　　},
　　// ...
}

・Babel と Webpack のようなものを用いて ES2015 モジュールを利用している場合、上記のように使う。
・ES2015+ では ComponentA のような変数名をオブジェクト内部に配置することは  "ComponentA: ComponentA"  の省略記法にあたり、変数の名前は次のどちらも意味することに注意する。
①テンプレート内で使われるカスタム要素名
②コンポーネントオプションを含んだ変数の名前

本日も最後まで読んで頂きありがとうございました🙇‍♂️

※本日時点で学習した内容を備忘目的で投稿しております。各項目を全て網羅している内容では無いため、「駆け出しが張り切ってアウトプットしてるな〜」程度で温かい目で読んで頂けると幸いです😇