コンポーネントの基本を✅

「29時間」残された可処分時間。MVP完成間に合うかな、、

さて、親コンポーネントと子コンポーネントとの値の受け渡しの復習を今一度しておきたいと思いました。

今回はVue公式に記載されている、コンポーネントの基本に関して学習していきます。

【Vue.js】コンポーネントの基本

パーツ化し再利用することで効率よく開発、メンテナンスを行うことを目的に作られたもの。ヘッダー、フッター、ボディなどに切り出されている。

プロパティを使用した子コンポーネントへのデータの受け渡し(props down)

できるだけ一つ一つのコンポーネントが持つ役割はシンプルにしたい。

コンポーネントが持つ値を子コンポーネントに渡すことで、コンポーネントの持つ責務を小さくすることができる。

子は、propsを設けることで親が持つ値を受け取ることができる。

#Child.vue
Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

親は、渡す内容を直接指定することができる。

#Parent.vue
<div id="app">
  <blog-post title="Hello Vue"></blog-post>
</div>

dataを渡す

#Parent.vue
var app = new Vue({
  el: '#app',
  data: {
    inputText: ''
  }
})

message属性をv-bindし、dataプロパティのinputTextを設定する。

これだけでinputTextの値は子コンポーネントに渡される。

<div id="app">
		<input type="text" v-model="inputText">
		<hello-world v-bind:message="inputText">
		</hello-world>
</div>
#Child.vue
Vue.component('hello-world',{
  template: '<h1>Hello World and {{ message }}</h1>',
  props: ['message']
})

子にリストデータを渡す

下記のように、postsデータの中に配列で複数のデータが存在する場合。

var app = new Vue({
  el: '#app',
  data: {
    alcohols: [
      {'id':0, 'name': 'ジントニック', 'content': 'HUBで安く飲める酒'},
      {'id':1, 'name': 'ビール', 'content': '飲み会でいっぱいめに活躍する酒'},
      {'id':2, 'name': 'ワイン', 'content': '大人気分を味わえる酒'},
    ]
  }
})

子は、v-forを使って受け取ることができる。

<div id="app">
	<alcohol-list 
		v-for="alcohol in alcohols" 
		v-bind:key="alcohol.id" 
		v-bind:alcohols="alcohol">
	</alcohol_list>
</div>

子から親に値を渡す(event up)

コンポーネントに渡された値に変化が起きた時、親コンポーネントのあたいも同じく変化させる必要がある。

これを、イベント購読と言う。$eventを使用してイベント購読は行われる。

まず、子コンポーネント側でイベントが設定されている値に$emitをつける。

<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>

次に、親コンポーネントでイベントをリッスンする。

そうすることで、送出されたイベントの値に $event でアクセスすることができる。

<blog-post
  ...
  v-on:enlarge-text="postFontSize += $event"
></blog-post>

または、下記のようにイベントハンドラがメソッドの場合

<blog-post
  ...
  v-on:enlarge-text="onEnlargeText"
></blog-post>

値は、そのメソッドの最初のパラメータとして渡される。

methods: {
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}

$emitは複数の引数を取ることができる。

$emitは引数を取ることができ、この引数を利用してデータを送ることができる。

また、複数のデータを渡す場合はオブジェクトを利用して渡すことができる。


#Child.vue
this.$emit('from-child',this.inputText,XXX)

親側で子からのイベントの設定を行う。

<div id="app">
	<p>{{ message }}</p>
	<emit-event v-on:from-child="receiveMessage">
	</emit-event>
</div>

受け取った値をreceiveMessageという名前に命名し、methodsでreceiveMessageを定義することで親側のデータを更新することができる。

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods:{
    receiveMessage: function(message){
      this.message = message;
    }
  }
})

コンポーネントの基本 - Vue.js