[Vue.js] props, 사용자 정의 event

속성을 이용한 정보 전달

자식 컴포넌트에서 props 옵션으로 속성을 정의하고 부모 컴포넌트에서는 v-on 디렉티브를 이용해 자식 컴포넌트의 속성에 정보를 전달한다.

또한 속성을 이용해 객체 전달을 할 수 있다.

속성은 자식 컴포넌트가 필요한 데이터를 속성으로 전달받아 UI를 렌더링하는 읽기 전용의 값이므로 변경하지 않는 것을 권장한다.

//App.vue
<CheckboxItem v-for="idol in idols" :key="idol.id" :idol="idol"/>
//CheckItem.vue
<template>
    <li><input type="checkbox" :key="idol.id" :checked="idol.checked"/>{{idol.name}}</li>
</template>
    
<script>
export default {
    name: 'CheckboxItem',
    props: ['idol']
}
</script>

 

이벤트 에미터 사용

컴포넌트 간에 이벤트를 공유하기 위해 사용한다.

//자식 컴포넌트
export default {
    name: 'DealUpdate',
    components: {
        Datepicker
    },
    props: {
        // title: String,
        // user: { type: String },
        // accountLog: Object,
        accountLog: {
        type: Object,
            required: true,
        default: () => ({})
        },
    },
    emits: ['closeToParent'],
    setup(props, context) {
    	console.log(props.accountLog)
    	context.emit('closeToParent')	//부모의 이벤트 실행
    }
}

속성의 유효성 검증

속성을 정의할 때 속성에 대한 유효성 검증이 필요하다면 객체 형태로 속성을 정의할 수 있다.

export default {
    props: {
        속성명: 타입명,
        속성명2: [타입명1, 타입명2],
        속성명3: {
            type: 타입명,
            required: [true/false, 기본값: false],
            default: [가본값 또는 기본값 리턴 함수, 기본값: undefined]
        }
    }
}

export default {
	name: "CheckItem",
    props: {
        name: String,
    	id: [Number, String],
        ids: Array,
        checked: {
            type: Boolean,
            required: false,
            default: false
        }
    }
}

 

사용자 정의 이벤트

자식컴포넌트에서 click event가 발생하는 위치에 $emit('이벤트명', event argument)

<template>
    <div>이름: <input type="text" v-model="name">
    <button @click="$emit('nameChanged', {name})">이벤트 발신</button></div>
</template>

<script setup lang='ts'>
let name = ''
</script>

<style>

</style>

부모 컴포넌트에서 @전달받은 이벤트명="event handler"

<template>
    <div>
        <InputName @nameChanged="nameChangedHandler"/>
        <br>
        <h3>App 데이터: {{parentName}}</h3>
    </div>
</template>
    
<script setup lang='ts'>
import InputName from './components/InputName.vue'
import { ref } from 'vue'
let parentName = ref('')
function nameChangedHandler(e) {
    parentName.value = e.name
}
    
</script>
    
<style>
    
</style>