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>

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>