Vue.jsのv-bind.syncの使い方

Vue

v-bind.sync

Vue.jsのv-bind.syncを使ってみてとても便利だったので、v-modelとの違いの含めてご紹介します。

syncとv-modelの違いは

基本的に両方同じ挙動するらしいです。

https://jp.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A3%BE%E5%AD%90

v-model 一つのpropを双方向バインディングが可能
sync 複数のpropでも双方向バインディングが可能

使用例

・親コンポーネント

.sync修飾子を付与すると、子コンポーネントからのthis.$emit('update:email', $event.target.value)で変更を検知することができます。

.vue

<template>
  <div>
    <LoginForm
      :email.sync="login.email"
      :password.sync="login.password"
    />
  </div>
</template>

<script>
import LoginForm from "@/components/LoginForm.vue";

export default {
  components: {
    LoginForm
  },
  data() {
    return {
      login: { email: '', password: '' }
    };
  }
};
</script>

・子コンポーネント

this.$emit('update:email', $event.target.value)にて、フォームの変更を親コンポーネントに渡す

.vue

<template>
  <div>
    <label>
      メールアドレス
      <input
        type="text"
        :value="email"
        @input="$emit('update:email', $event.target.value)"
      />
    </label>
    <label>
      パスワード
      <input
        type="password"
        :value="password"
        @input="$emit('update:password', $event.target.value)"
      />
    </label>
  </div>
</template>

<script>
export default {
  props: {
    email: {
      type: String,
      default: ""
    },
    password: {
      type: String,
      default: ""
    }
  }
};
</script>

まとめ

v-bind.syncとv-modelは、基本的に両方同じ挙動をするとのことらしいので、自作コンポーネントならとりあえずv-bind.sync使っておけば良さそうです！