Vue.js【コンポーネントについて】

処理をコンポーネント化する＝部品化する、という考えで良いのかな？

他の場所でも使いまわしできるように処理をコンポーネント化するために、今日は勉強していきます。

See the Pen BaapBdp by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

Vue.component('コンポーネント名', {
  ～～～処理～～～
})

と書くことでグローバルなコンポーネントが出来ます。あちこちで使いまわししたいとき。

See the Pen OJJWLag by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

const Scoped = {
     ～～～処理～～～
}

というふうに書き、使用する側で

  components: {
    'component': Scoped,
  }

と指定してあげれば使うことが可能になります。

この記述のない"#app"は処理を呼んでいるにも関わらず、反映されていないことがわかると思います。

See the Pen OJJWLqj by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

データを持たせることも可能。その場合は関数として定義し、return必須のようです。

カスタムタグの名前について W3C ルール (全て小文字で、ハイフンが含まれている必要がある)にしたがうことは良い取り組みと考えられますが、Vue.js はそれを強制しないことを覚えておいてください。

と公式ドキュメントにありました。強制的ではないですが積極的に取り入れていったほうが良いかもしれません。

See the Pen YzzNzKG by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

このように、Vue.extendとVue.componentはそれぞれ、定義、登録の役割を果たします。

See the Pen ZEELEGZ by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

前回さらっと流したpropsですが、「親から子へとデータを伝達する場合」に使用します。

appはHTMLから、app2はVue内の親コンポーネントから値を渡されています。

SuzuBlog