3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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

##syncの使い方

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

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

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

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

①データの受け取り
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>

▼画面表示例

image.png

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

image.png
3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?