Vueコンポーネント間まとめ2（イベント、Function）

##イベント
イベントを利用して親子間でデータの受け渡し、method実行が可能

- 親：v-on を使って子コンポーネントで起きた任意のイベントを購読
- 子：$emit メソッド にイベントの名前を渡して呼び出すことで、イベントを送出

```src/components/blogPost.vue
<template>
  <div class="blog-post">
    <h3>{{ post.title }}</h3>
    <button v-on:click="$emit('enlarge-text')">
      Enlarge text
    </button>
    <div v-html="post.content"></div>
  </div>
</template>

<script>
export default {
  props: ["post"]
};
</script>

```

``` src/App.vue
<template>
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"
      v-on:enlarge-text="postFontSize += 0.1"
    ></blog-post>
  </div>
</template>

<script>
import blogPost from "./components/blogPost.vue";

export default {
  components: {
    blogPost
  },
  data: function() {
    return {
      postFontSize: 1,
      posts: [
        { id: 1, title: "My journey with Vue", content: "content1" },
        { id: 2, title: "Blogging with Vue", content: "content2" },
        { id: 3, title: "Why Vue is so fun", content: "content3" }
      ]
    };
  }
};
</script>
```

###イベントと値の送出
- 親：送出されたイベントの値に $event でアクセス
- 子：$emit の2番目のパラメータを使って値を提供

```src/components/blogPost.vue
<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>
```

```src/App.vue
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"
      v-on:enlarge-text="postFontSize += $event"
    ></blog-post>
```

####メソッドの場合
- 値はそのメソッドの最初のパラメータとして渡される

```src/components/blogPost.vue
<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>
```

```src/App.vue
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"
      v-on:enlarge-text="onEnlargeText"
    ></blog-post>

<script>
import blogPost from "./components/blogPost.vue";

export default {
  components: {
    blogPost
  },
  data: function() {
    return {
      postFontSize: 1,
      posts: [
        { id: 1, title: "My journey with Vue", content: "content1" },
        { id: 2, title: "Blogging with Vue", content: "content2" },
        { id: 3, title: "Why Vue is so fun", content: "content3" }
      ]
    };
  },
  methods: {
    onEnlargeText: function(enlargeAmount) {
      this.postFontSize += enlargeAmount;
    }
  }
};
</script>
```
####メソッドに複数パラメータを渡す場合
- objectにして渡す

```src/components/blogPost.vue
<button v-on:click="$emit('enlarge-text', { size: 0.1, color: 'red' })">
  Enlarge text
</button>
```

```src/App.vue
<template>
  <div :style="{ fontSize: postFontSize + 'em', color: color }">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"
      v-on:enlarge-text="onEnlargeText"
    ></blog-post>
  </div>
</template>

<script>
export default {
  :
  :
  methods: {
    onEnlargeText: function(objectParam) {
      this.postFontSize += objectParam.size;
      this.color = objectParam.color;
    }
  }
}
</script>
```

##v-bind type:function(非推奨)
*イベントが推奨されるのは以下のためみたいです*
- This works in the same way that the DOM works — providing a little more consistency with the browser than what React does. 


```src/components/blogPost.vue
<template>
  <div class="blog-post">
    <h3>{{ post.title }}</h3>
    <button v-on:click="onEnlargeText(0.1)">
      Enlarge text
    </button>
    <div v-html="post.content"></div>
  </div>
</template>

<script>
export default {
  props: ["post","onEnlargeText"]
};
</script>
```

```vue:src/App.vue
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"
      v-bind:on-enlarge-text="onEnlargeText"
    ></blog-post>

<script>
export default {
  :
  :
  methods: {
    onEnlargeText: function(enlargeAmount) {
      this.postFontSize += enlargeAmount;
    }
  }
}
</script>
```