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>

이제 텍스트 필드에 대한 입력 값이 실시간으로 반영됩니다.

중첩 변수 데이터 모니터링

변수가 중첩되어 있는 경우, 이하 2개의 설정이 필요.

(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
    }
  }
}