[VUE + TYPESCRIPT] Emit 이벤트, 부모에게 이벤트 전달

VUE.JS 목록

 

src/component/Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <child @counter="counter"></child>
    <p>자식에게 받은 counter: {{ count }}</p>
  </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 {
    count: number = 0;

    counter() {
        this.count++;
    }
}
</script>

 

src/component/Child.vue

<template>
    <div>
        <button @click="counter">숫자 올리기</button>
    </div>
</template>

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

@Component
export default class Child extends Vue {
    @Emit()
    counter() {
        
    }
}
</script> 

 

 

 

 

 

VUE.JS 목록