Vue3の基本構文③

Vueの構文についてコードベースで簡単にまとめます。
ちなみにシリーズ最終回です。
基本構文①
基本構文②

今回は以下の2つです。

• コンポーネントとProps
• コミュニケーティングevent

コンポーネントとProps

コンポーネントとは構成要素を意味し、再利用可能なVueインスタンス要素のことです。
Webページ構成する様々な要素、例えばヘッダーやサイドバーなどを分割し、コンポーネント化することで、設計・開発・テストがコンポーネント単位で行えるようになったりというメリットがあります。
そして、コンポーネントには親コンポーネントと子コンポーネントがあり、親コンポーネントから子コンポーネントに値を渡す際に使用されるのがpropsです。

main.js

const app = Vue.createApp({})

app.component('programming', {
  props: ['title'],
  template: `<h4>{{ title }}</h4>`
})

app.mount('#component-demo')
}

Vueコンポーネントを作成し、その中でprops(title)をVueインスタンスのdataの様に定義します。上のコードから分かる様に、テンプレートからpropsで定義した値にアクセスすることができます。

index.html

<div id="component-demo" class="demo">
  <programming title="Angular"></programming>
  <programming title="React"></programming>
  <programming title="Vue"></programming>
</div>    

コンポーネント側でpropsが登録されたので、引数としてdata(title)をコンポーネントに送ることができます。

実践的な使われ方

main.js

const App = {
    data() {
      return {
        languages: [
          { id: 1, title: 'Angular' },
          { id: 2, title: 'React' },
          { id: 3, title: 'Vue' }
        ]
      }
    }
  }

const app = Vue.createApp(App)

app.component('programming', {
  props: ['title'],
  template: `<h4>{{ title }}</h4>`
})

app.mount('#component-demo')

index.html

<div id="component-demo">
  <programming
    v-for="language in languages"
    :key="language.id"
    :title="language.title"
   ></programming>
</div>  

上記のようにVueインスタンスのdataの中で配列で定義し、htmlでv-forを使いレンダリングする方法が実際のアプリケーションでよく見られます。また、v-bindを使用することでpropsをダイナミックに渡すことができます。

コミュニケーティングevent

コミュニケーションは親コンポーネント->子コンポーネントだけではなく、子->親でもできます。
試しに子コンポーネントのボタンクリックから親にあるメソッドを走らせて、colorプロパティーを変更します。

main.js

const App = {
    data() {
      return {
        languages: [
          { id: 1, title: 'Angular' },
          { id: 2, title: 'React' },
          { id: 3, title: 'Vue' }
        ],
        languageColor: "black"
      }
    }
  }

VueインスタンスのdataにlanguageColorプロパティーを追加。

index.html

<div :style="{ color: languageColor }">
  <programming
    v-for="language in languages"
    :key="language.id"
    :title="language.title"
  >
  </programming>
</div>   

htmlでスタイルのcolorを追加

main.js

app.component('programming', {
  props: ['title'],
  template: `
  <h4>{{ title }}</h4>
  <button>
    赤色に変更
  </button>
  `
})

テンプレートにボタンを追加。現状はまだボタンが機能しない。

index.html

<programming
  v-for="language in languages"
  :key="language.id"
  :title="language.title"
  @change-color="languageColor = 'red'"
>
</programming>
</div>   

html側でv-onもしくは@を使うことで子コンポーネントのイベントをリッスンすることができます。@を使用してchange-colorメソッドの実装する。

main.js

<button @click="$emit('change-color')">
  赤色に変更   
</button>

子コンポーネントから親にイベントを発行してくれる$emitを使います。すると、親であるhtmlでイベントを受け取りリスナーのchange-colorメソッドを実行し、以下の様にtitleが赤くなりました。

おわりに

シリーズ三回に分けてVue3の基本構文を紹介してきました。Vue2とほとんど変わらないものばかり紹介してきましたが、これからもVue3を勉強してアウトプットしていきたいと思います。