Vue component에 속성과 이벤트 정의

컴포넌트에 속성과 이벤트를 뷰에 정의할 수 있는데, 사용자 정의 속성 및 사용자 정의 이벤트를 만들어서 적용할 수 있다.

 

속성

• 사용자 정의 속성 : 전역 등록하거나 지역 등록한 컴포넌트를 사용할 때 컴포넌트와 함께 속성을 정의.

 

App.vue 코드

<script>

import UserProfile from './components/UserProfile.vue';

export default{

components : {

UserProfile,

},

data(){

return{

name : 'LJH', company : 'ljh99', age : 26,

};

},

}

</script>

<template>

<!-- :age 라고 하면 컴포넌트 사용자 정의 속성을 사용한 것 : v-bind(:) -->

<UserProfile :name="name" :company="company" :age="age"/>

</template>

<style scoped>

 

</style>

 

UserProfile.vue

<script>

export default{

props : {

name : String, company : String, age:[String]

},

}

</script>

<template>

<p>이름 : {{ name }}</p>

<p>회사명 : {{ company }}</p>

<p>나이 : {{ age }}</p>

</template>

UserProfile.vue에서 script 태그 안에 props를 만들어 유효성을 검사를 할 수 있게 할 수 있다. 그렇게 하여 각각의 변수에 들어오는 자료형이 다를 경우 콘솔창에서 확인할 수 있다.

 

이벤트

• template 태그 안에서 사용하는 HTML 태그에 v-on 디렉티브(@축약형) 사용하면 특정 이벤트를 연결할 수 있다.
• 컴포넌트에게도 v-on 디렉티브로 이벤트를 사용할 수 있다.
• 컴포넌트에서 사용하는 이벤트 타입은 하위 컴포넌트에서 부모 컴포넌트로 발신하는 이벤트를 수신하는 용도이기 때문에 사용자 정의 이벤트로 구현할 수 있다.

App.vue

<script>

import UserProfile from './components/UserProfile.vue';

export default{

components : {

UserProfile,

},

methods : {

printHello(){

alert('Hello Component!');

},

},

}

</script>

<template>

<UserProfile @print-hello="printHello"/>

</template>

<style scoped>

 

</style>

 

UserInfo.vue

<script>

export default{

props : {

name : {

type : String,

required : false,

validator : function(value){

return value.length > 1;

},

},

age : {

type : Number,

default : function(){

return 10;

},

},

},

methods : {

parentEventCall(){

this.$emit('print-hello');

},

},

}

</script>

<template>

<!-- $emit() 발신 방식을 인라인핸들러 방식 -->

<!-- <button @click="$emit('print-hello')">클릭</button> -->

<!-- 메서드 핸들러 방식 -->

<button @click="parentEventCall">클릭</button>

</template>

• 부모 컴포넌트에서 사용자 정의 이벤트의 사용여부와 관계없이 모든 컴포넌트는 $emit() 내자 메서드를 사용하여 부모 컴포넌트로 이벤트를 발신할 수 있다.
• 무분별한 이벤트 발신을 막기 위해서 옵션스API emit속성을 사용해서 관리하도록 권장하고 있다.
• emit : ['print-hello', 'login_process', ......],
• 부모 컴포넌트로 발신할 수 있는 이벤트 타입을 명시하여 뷰 app에서 자체적으로 검사할 수 있도록

이벤트 발신 argument, parameter

• @emit() 내장 메서드는 부모 컴포넌트로 이벤트를 발신
• 첫번째 인자로 부모컴포넌트 이벤트 명시(필수)
• 두번째 인자로 값을 지정하면 부모컴포넌트 이벤트 매개변수로 값을 전달할 수 있다.

App.vue

<script>

import UserProfile from './components/UserProfile.vue';

export default{

components : {

UserProfile,

},

methods : {

printHello(name, age){

alert(`${name}, ${age}`);

},

},

}

</script>

<template>

<UserProfile @print-hello="(name, age) => printHello(name, age)"/>

</template>

<style scoped>

 

</style>

UserInfo.vue

<script>

export default{

props : {

name : {

type : String,

required : false,

validator : function(value){

return value.length > 1;

},

},

age : {

type : Number,

default : function(){

return 10;

},

},

},

emits : ['print-hello'],

methods : {

parentEventCall(){

this.$emit('print-hello', 'ljh', 20);

},

},

}

</script>

<template>

<!-- $emit() 발신 방식을 인라인핸들러 방식 -->

<button @click="$emit('print-hello', 'ljh', 20)">클릭</button>

<!-- 메서드 핸들러 방식 -->

<!-- <button @click="parentEventCall">클릭</button> -->

</template>