[VUE + TYPESCRIPT] Watch 데이터 감시하기

VUE.JS 목록

src/component/Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <child :parentMessage="message"></child>
    <button @click="onChange">버튼</button>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import Child from '@/components/Child.vue';

@Component({
    components: {
        Child,
    },
})

export default class Home extends Vue {
    message: string = '안녕하세요.';

    onChange() {
        this.message = '변경됨';
    }
}
</script>

 

버튼을 추가합니다.

 

/src/component/Child.vue

<template>
    <div>
        <p>{{ alertMessage }}</p>
        {{ parentMessage }}
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch} from 'vue-property-decorator';

@Component
export default class Child extends Vue {
    @Prop() parentMessage?: string;
    alertMessage: string = '';

    @Watch('parentMessage')
    updateMessage() {
        this.alertMessage = '알립니다.';
    }
}
</script>

Watch 함수를 생성합니다.

 

parentMessage가 변경되면 Watch 함수 updateMessage가 실행됩니다.

 

 

 

VUE.JS 목록