오늘 배운 것
Vue Component
Basic 컴포넌트 작성
//UserName.vue
//UserName 컴포넌트를 생성한다.
//컴포넌트의 모습을 정의해준다.
<template>
//name은 컴포넌트의 data에서 가져온 정보를 받는다.
<div>이름은 {{name}}입니다.</div>
</template>
<script>
//export를 해주어야 다른 컴포넌트를 import해서 사용할 수 있다.
export default {
data() {
return {
name: "조수현",
};
},
};
</script>
//User.vue(UserName과 UserAdress의 부모 컴포넌트)
//위에서 작성한 UserName을 사용할 컴포넌트를 생성한다.
//컴포넌트의 모습을 정의해준다.
<template>
<div>
//컴포넌트 UserName과 UserAdress를 렌더링해주는 모습
<UserName></UserName>
<UserAdress></UserAdress>
</div>
</template>
<script>
//다른 컴포넌트를 사용하기 위해서는 import를 해야한다.
import UserName from "./UserName"
import UserAdress from "./UserAdress"
export default {
//컴포넌트의 속성 components에 사용하는 컴포넌트들을 정의한다.
components:{
UserName,
UserAdress
}
}
</script>
Props를 이용해 자식 컴포넌트로 데이터 전달
<template>
<div>
<UserName v-bind:name="name"></UserName>
<UserAdress :adress="adress"></UserAdress>
</div>
</template>
<script>
import UserName from "./UserName.vue";
import UserAdress from "./UserAdress.vue";
export default {
data() {
return {
name: "조수현",
adress: "울산",
};
},
components: {
UserName,
UserAdress,
},
};
</script>
<template>
<div>주소는 {{adress}}입니다.</div>
</template>
<script>
export default {
props: {
adress: String,
},
};
</script>
emit을 이용해 부모 컴포넌트로 데이터 전달
//UserAdress.vue
<template>
<div>
<div>주소는 {{adress}}입니다.</div>
//버튼 클릭시 chane 함수 실행
<button @click="change">클릭</button>
</div>
</template>
<script>
export default {
props: {
adress: String,
},
methods: {
//change 함수는 상위 컴포넌트로 $emit을 이용해 신호를 보냄
//이벤트명은 "handlingAdress", 파라미터로 this.adress+ "북구"를 전달
change() {
this.$emit("handlingAdress", this.adress + "북구");
},
},
};
</script>
//User.Vue
<template>
<div>
<UserName v-bind:name="name"></UserName>
//자식 컴포넌트로부터 handlingAdress 이벤트 발생시 handlingState 함수 실행
<UserAdress :adress="adress" @handlingAdress="handlingState"></UserAdress>
</div>
</template>
<script>
import UserName from "./UserName.vue";
import UserAdress from "./UserAdress.vue";
export default {
data() {
return {
name: "조수현",
adress: "울산",
};
},
components: {
UserName,
UserAdress,
},
methods: {
//handlingState 함수는 자식 컴포넌트로 전달받은 데이터를
//파라미터를 이용해 바꿔주고 있는 모습.
handlingState(newAdress) {
this.adress = newAdress;
},
},
};
</script>
event bus를 이용해 형제 컴포넌트 사이의 데이터 전달
//main.js
//eventbus 인스턴스를 main.js에 추가
export const eventBus = new Vue()
//userAdress.vue
<template>
<div>
<div>주소는 {{adress}}입니다.</div>
<button @click="change">클릭</button>
</div>
</template>
<script>
//eventBus를 사용하기 위해서는 import가 필요하다
import { eventBus } from "../main";
export default {
props: {
adress: String,
},
methods: {
//클릭하면 부모 컴포넌트로 handlingAdress 이벤트,
//eventBus로 adressEdited 이벤트를 전달
change() {
this.$emit("handlingAdress", this.adress + "북구");
eventBus.$emit("adressEdited", "주소가 수정되었습니다");
},
},
};
</script>
//UserName.vue
<template>
<div>이름은 {{name}}입니다.</div>
</template>
<script>
//eventBus를 사용하기 위해서는 import가 필요하다
import { eventBus } from "../main";
export default {
props: ["name"],
//eventBus 이벤트를 받을 수 있게 하기 위해서 created 메소드 안에 정의한 모습
//만약 userAdress에서 adressEdited 이벤트를 eventBus 인스턴스로 보내주면
//UserName 컴포넌트에서 그 이벤트를 수신해서 사용할 수 있게된다.
created() {
eventBus.$on("adressEdited", (comment) => console.log(comment));
//"주소가 수정되었습니다."
},
};
</script>