Vue 입력 값 변경 및 변경 감지 & 자식에서 부모에게 데이터를 전달하는 방법(v-model, v-on:change)

자신의 템플릿 내에서의 변화를 검출하는 패턴과 자식 템플릿에서의 변화를 검출하고 부모에게 정보를 전달하는 패턴의 2 가지를 생각해 보자.

자신의 템플릿 내에서 변화를 감지

절차

①タグにv-modelを設定する (v-model="変数")
　↓
②dataオプションで変数を定義する
　↓
③タグに@changeイベントを設定する（@change="イベント名"）
　↓
④methodsオプションで処理を定義する

①과 ②, ③과 ④가 각각 쌍이 된다.

※주의점
・v-model로 지정한 변수의 값과 화면 입력이 연동한다
・「@」는 「v-on:」의 약어@change = v-on:change

vue

<template>
<div>
  <v-col
    cols="12"
    sm="3">
    <v-text-field
     <!--①v-modelを設定-->
    　v-model="text"

     <!--③changeイベントを設定-->
      @change="applyChanges" />
  </v-col>


  <p>
    <!--v-modelのデータ連動確認用-->
   ・v-modelのデータ: 　{{text}}
  </p>
</div>
</template>

<script>
export default {
  data(){
    return{
      //②v-model用の変数を定義
      text: "初期値"
    }
  },
  methods:{
    //④changeイベント用のメソッドを定義
    applyChanges(){
      console.log("text-filedが変更されました")
    }
  }
}
</script>

실행 결과 확인

▼ 변경 전의 상태.






▼변경 후의 상태












v-model로 데이터가 연동. change 이벤트가 발화 중입니다.

자식에서 부모로 데이터 전달

거친 흐름은, 자식 템플리로 데이터 발신을 준비해, 부모측에서 받을 준비를 한다.

子：①タグにv-modelを設定 (v-model="変数")
　↓
子：②dataオプションで変数を定義
　↓
子：③タグに@changeイベントを設定（@change="イベント名"）
　↓
子：④methodsオプションで発信処理を定義 （★親に引き渡すイベントと変数）
　↓
親：⑤受け取ったイベント名を属性で定義し親のイベントに引き継ぐ　（@受けとたイベント名 = "親のイベント名"）
　↓
親：⑥methodsオプションで処理を定義 （引数で子の変数を受け取る）
　↓
親：⑦受け取ったデータをいれる変数を定義（dataオプション）
　↓
親：⑧受け取ったデータを画面上に表示

※주의점
・아이의 methods내에서, 프롭퍼티를 호출하는 경우는 「this」를 붙인다.
　┗ this.$emit(' 전달할 메소드 이름', 변수)
┗ this. 프로퍼티명

실례

(자식)TextField.vue

<template>
<div>
  <v-col
    cols="12"
    sm="3">
     <!--①v-modelを設定-->
    　v-model="text"

     <!--③changeイベントを設定-->
      @change="applyChanges" />
  </v-col>
</div>
</template>

<script>
export default {
  data(){
    return{
      //②v-model用の変数を定義
      text: "初期値"
    }
  },
  methods:{
    //④methodsオプションで発信処理を定義 
    applyChanges(){
      //データを変数で渡すため変数を定義
      const text = this.text
      //第１引数でイベント名、第２引数で変数を渡す
      this.$emit('childChange', text)
    }
  }
}
</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:{
    //⑥methodsオプションで処理を定義 
    parentChange(text){
      this.text = text
      console.log("text-filedが変更されました")
    }
  }
}
</script>

실시 결과






▼화면 입력 후












v-model에서 변경된 값이 적용되었습니다.
부모 측에서 정의한 방법도 발화하고 있다.

다만, 상기의 어느 예도, change 이벤트로 method를 발화시키기 때문에, 변경을 확정(Enter) 하지 않으면 반영되지 않는다.

입력 내용을 즉시 반영하고 싶은 경우는 watch 프로퍼티를 사용한다.