vue 하위 컴포넌트에서 클릭한 이벤트를 전달해줄때,
예제
예제 코드는 component 적용의 내용을 참고하자.
component 구성이 완료되었다고 생각하고 코드를 일부만 작성하겠다.
객체처럼 사용할 Child.vue
<template>
<div>
<p></p> // prop 사용
<img v-bind:src="require(`@/assets/${image}`)" alt="test image"> // prop 사용 - image, require가 필수이다.
</div>
</template>
<script>
export default {
name: 'Child',
props: {
msg: String,
image: String
}
}
</script>
component를 사용하는 vue
component에서는 prop들을 넣어준다
<template>
<div>
<Child msg="child test msg" image="1.png"/> // 여기서 1.png는 src/assets/1.png 에 있다.
</div>
</template>
<script>
import child from './Child' // 상대주소로 기입
export default {
name: 'HelloWorld',
components: {
'Child': child // 앞의 naming이 사용할 name, 뒤에는 import한 name
},
}
</script>