[Vue] Component4, your input is

App.vue

 

<template>
  <div>
    <h2>Your Input is!</h2>
    <h3>{{ input }}</h3>
    <button @click="displayDetail = true">입력하기</button>
    <DetailView
      v-if="displayDetail"
      @closeDetail="close"
      @sendData="showData"
    ></DetailView>
  </div>
</template>
<script>
import DetailView from "./components/DetailView.vue";
export default {
  name: "App",
  components: {
    DetailView,
  },
  data() {
    return {
      displayDetail: false,
      input: "default",
    };
  },
  methods: {
    close() {
      this.displayDetail = false;
    },
    showData(data) {
      this.input = data;
    },
  },
};
</script>

<style></style>

 

 

Defalut.vue

<template>
  <div class="wrapper">
    <div class="container">
      <h2>Detail Page</h2>
      <button @click="closeDetail">close</button>
      <input type="text" v-model="username" />
      <button @click="sendData">send Data</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "detailPage",
  data() {
    return {
      username: "",
    };
  },
  methods: {
    closeDetail() {
      this.$emit("closeDetail");
    },
    sendData() {
      this.$emit("sendData", this.username);
      this.closeDetail();
    },
  },
};
</script>

<style scoped>
.wrapper {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  background: #fff;
  width: 60%;
}
</style>

 

 

자식은 부모의 데이터를 변환할 수 없다.

단 자식의 이벤트를 부모에게 넘겨주어서

부모에서 처리해줄 수 있다.

부모에게 이벤트를 전달할 땐 emit을 해주고 뒤에 파라미터를 넣어줄 수 있다.