【vue】.syncの使い方。v-modelやセッターを使わずに親子でデータを受けわたす方法。

vueのsync修飾子を使うと、親子でのデータ受け渡しが簡単にできる。

syncの使い方

親と子でそれぞれポイントがある。

親はinputタグなどデータを連動させたいタグに以下を設置する。

:属性名.sync="変数名"

子は①データの受け取り、②データの表示、③変更後のデータの送信の３つの記述を行う。

①データの受け取り

export default {
  props:{
    親の属性名: {type:型}
  }
}

propsで親で指定した属性名を変数として宣言する。
以下でその変数を使用する。

②データの表示

:value="変数名"

inputタグに受け取ったデータを表示する場合は、value属性にv-bindで親から受け取った変数を指定する。

③変更後のデータの送信

@input="$emit('update:属性名', $event.target.value)"

inputタグで変更があった場合に、親の.syncがついたタグに情報を送る。

このupdate:属性名で指定した値と、親の属性名が一致していること。

フルコード事例

▼フルコード

親

<template>
  <div>
    <!-- 子テンプレートを呼び出し、プロパティmessageで変数msgを共有 -->
    <SyncChiled :message.sync="msg" />

    <!-- 親で定義しているデータが変更されるかの確認用 -->
    ・変数msgを表示:　{{msg}}
  </div>
</template>

<script>
import SyncChiled from "./SyncChiled" 

export default {
  components:{
    SyncChiled  //子テンプレをタグとして使えるようにする
  },
  data(){
    return{
      msg: "初期メッセージ"
    }
  }
}
</script>

子（SyncChiled.vue）

<template>
  <!-- 渡すテンプレート -->
  <div>
    <!-- 親に戻すデータを指定 -->
    <input type="text" :value="message" @input="$emit('update:message', $event.target.value)">
  </div>
</template>

<script>
export default {
  //親から受け取ったデータ
  props:{
    message: {type:String}
  }
}
</script>

▼画面表示例

↓ 入力に合わせて変数も変更されている