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>
▼画面表示例
↓ 入力に合わせて変数も変更されている