오늘 배운 것

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를 이용해 자식 컴포넌트로 데이터 전달

//User.vue
<template>
  <div>
    //자식 컴포넌트에 props로 데이터를 전달하기 위해서는 v-bind 해주어야한다.
    //약어로도 사용 가능하다.
    <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>

//UserAdress.vue
<template>
  <div>주소는 {{adress}}입니다.</div>
</template>

<script>
export default {
  //props로 전달받은 데이터를 사용하기 위해서는 props 속성을 만들어서 사용한다.
  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>