[Vue] - Props & Emit

Props

• 부모 컴포넌트: 자식 컴포넌트한테 props 를 전달한다.

<template>
  <div>
    <h1>This is homepage</h1>
    <SeizeCoder title="home title" name="Seize Coder"></SeizeCoder> 
	// title 과 name 을 SeizeCoder 이라는 자식 컴포넌트를 props 로 내려준다. 
  </div>
</template>

<script>
import SeizeCoder from "@/components/SeizeCoder.vue"; // /앞에 @ 붙이면 src 를 가리킨다
export default {
  components: {
    SeizeCoder,
  },
  data() {
    return {
      name: "Seize Coder",
    };
  },
  methods: {},
};
</script>

<style scoped>
h1 {
  color: red;
}
</style>

• 자식 컴포넌트: 부모 컴포넌트한테 props 를 전달받는다.

<template>
  <div>
    <h1>{{title}}</h1> <!-- title 과 name 을 props 로 받아와서 사용 --> 
    <p>{{ name }}</p>
    <button @click="updateNmae">Change name</button>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  props: { // 이렇게 작성해서 전달 받을 props 를 설정한다.  
    title: {
      type: String, // 스트링 타입만 받겠다고 세팅하는거
      required: false, // 무조건 항상 보내줘야한다는 거, 안보내주면 에러 뜸
      default: "default title", // 데이터 받기 전 초기값 설정
    },
    name: {
      type: String,
      default: "defualt name",
    },
  },
  data() {
    return {
      // name: "Seize Coder",
    };
  },

  methods: {
    updateNmae() {
      this.name = "Seze Coder Updated";
    },
  },
});
</script>

Emit

• 자식 컴포넌트에서 부모 컴포넌트로 데이터 넘겨주기
• 자식 컴포넌트

<template>
  <div>
    <label for>Name</label>
    <input
      type="text"
      :value="name"
      style="padding: 30px; border: 2px solid green;"
      @input="updateName"
    />
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      requried: true,
    },
  },
  methods: {
    updateName(e) {
      console.log(e.target.value);
      this.$emit("update-name", e.target.value); //부모 컴포넌트로 보낼 변수명과 데이터를 인자로 넣어준다.
    },
  },
};
</script>

• 부모 컴포넌트

<template>
  <div>
    <h1>This is homepage</h1>
    <form action>
      <InputField :name="name" @update-name="updateName"></InputField>
      <!--자식 컴포넌트에서 설정한 변수명을 이벤트로 불러온다 @변수명 -->
      <br />
      <button>Submit</button>
    </form>
    {{ name }}
  </div>
</template>

<script>
import InputField from "@/components/InputField.vue";
export default {
  components: {
    InputField,
  },
  data() {
    return {
      name: "",
    };
  },
  methods: {
    updateName(name) {
      // 인자로 자식 컴포넌트의 value 가 들어온다.
      this.name = name;
    },
  },
};
</script>

• 더 심플하게 Emit 사용하기
• 자식 컴포넌트

<template>
  <div>
    <label for>Name</label>
    <input
      type="text"
      :value="value"
      style="padding: 30px; border: 2px solid green;"
      @input="$emit('input', $event.target.value)"
    />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      requried: true,
    },
  },
};
</script>

• 부모 컴포넌트

<template>
  <div>
    <h1>This is homepage</h1>
    <form action>
      <InputField v-model="name"></InputField>
      <br />
      <button>Submit</button>
    </form>
    {{ name }}
  </div>
</template>

<script>
import InputField from "@/components/InputField.vue";
export default {
  components: {
    InputField,
  },
  data() {
    return {
      name: "",
    };
  },
};
</script>