watchプロパティで入力内容を即時反映する方法。子から親へのデータ受け渡し

15120 ワード
Vue.js Vuetify Vue.js テキストリンク

watchプロパティで入力内容を即時反映する方法。子から親へのデータ受け渡し

watchプロパティを使うと画面上の変更内容をリアルタイムで検知し、設定した処理を実行することができる。

watchプロパティを使う手順

①変数を定義する
　↓
②変数に対してwatachプロパティを設定する

watchプロパティは変数の変更を感知するため、変更内容を監視する変数を指定する。



※注意点
・watchプロパティの中で監視する変数を指定。
　　┗ 変数名:function(){処理}

・変数内のネストしたデータを監視する場合は追加設定が必要。
　　┗ 関数を「handler(){}」にする。
　　┗ 「deep: true」を設定する。


watchプロパティの使い方（ネストしてない変数の監視）

  watch:{
     プロパティ名: function(){
       処理
     }
  }

実例

(子)TextField.vue
<template>
<div>
  <v-col
    cols="12"
    sm="3">
    <v-text-field
    　v-model="text" />
  </v-col>
</div>
</template>

<script>
export default {
  data(){
    return{
      //①監視する変数を定義
      text: "初期値"
  },
  watch:{
    //②変数に対してwatchプロパティを設定
    //textの値が変わったら以下処理を実行。
    text:
      function (a){
        this.$emit('childChange', a)
    }
  }
}
</script>

関数内のthis.$emit('childChange', a)
　┗ 関数内でプロパティを自分の呼び出す場合はthisが必要。
　┗ $emitは子から親にデータを渡す
　┗ $emit('親に渡すメソッド名', 引数)
　　　┗ 引数は任意
　　　┗ 引数には監視している変数が入る



▼引数のメリット
引数を使わずにデータを指定して渡す方法もあるが、引数を使った記述の方がより簡易的。

引数あり
  watch:{
    text:
      function (a){
        this.$emit('childChange', a)
    }
  }
引数なし(データを直接指定)
  watch:{
    text:
      function (){
        this.$emit('childChange', this.text)
    }
  }
(親)parent.vue
<template>
  <v-app>
    <TextField
    <!--子からイベントを受け取り、親のイベントに引き継ぐ-->
    @childChange="parentChange"
     />

    <p>
    ・v-modelのデータ:　 {{text}}
    </p>
  </v-app>
</template>

<script>
import TextField from "./TextField"

export default {
  name: "Parent",
  components:{
    TextField
  },
  data(){
    return{
      text:'初期値'
    }
  },
  methods:{
    //親のイベントを実行
    parentChange(text){
      this.text = text
      console.log("text-filedが変更されました")
    }
  }
}
</script>

これで、text-fieldへの入力値がリアルタイムで反映される。


ネストした変数データの監視

変数がネストしている場合、以下２つの設定が必要。

(1) functionをhandlerに変更
(2) deep: true　を設定

※watchプロパティの中が入れ子になるため、追加で{}が必要。

  watch:{
    プロパティ名:{　
      handler(){
        処理
      },
      deep: true
    }
  }


実例

(子)TextField.vue
<template>
<div>
  <v-col
    cols="12"
    sm="3">
    <v-text-field
    　v-model="text.sub" />
  </v-col>
</div>
</template>

<script>
export default {
  data(){
    return{
      //①監視する変数を定義(入れ子)
      text: {
        first: "初期値",
        sub: "subテキスト"}
    }
  },
  watch:{
    //②変数に対してwatchプロパティを設定
    text:{　
      handler(a){
        this.$emit('childChange', a)
      },
      deep: true
    }
  }
}
</script>
parent.vue
<template>
  <v-app>
    <TextField
    <!--子からイベントを受け取り、親のイベントに引き継ぐ-->
    @childChange="parentChange"
     />

    <p>
    ・v-modelのデータ:　 {{text}}
    </p>
  </v-app>
</template>

<script>
import TextField from "./TextField"

export default {
  name: "Parent",
  components:{
    TextField
  },
  data(){
    return{
      text:'初期値'
    }
  },
  methods:{
    parentChange(text){
      //受け取った入れ子の変数のsubを使う
      this.text = text.sub
      console.log("text-filedが変更されました")
    }
  }
}
</script>



▼初期状態



▼文字入力後

文字を入力する毎に、親で設定したメソッドが実行されている。

変更があったタイミングでwatchが作動するため、初期値は反映されていない。

immediate: trueを追加で記述することで、初期値から反映することができる。


immediate: true

(子)TextField.vue
  watch:{
    text:{
      //初期値からデータ連動
      immediate: true,
      handler(a){
        this.$emit('childChange', a)
      },
      deep: true
    }
  }
}