emit으로 자식 -> 부모 데이터 전달

전달 방식이 헷갈려서 따로 정리함

 

부모

<template>
  <button @click="sendData">전송</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      const data = '전송된 데이터';
      this.$emit('data', data);
    }
  }
}
</script>

 

emit 이용해서 this.$emit('데이터명', 데이터); 방식으로 부모로 넘겨주고

 

자식

<template>
  <div>
    <p>부모 컴포넌트에서 받은 데이터: {{ receivedData }}</p>
    <child-component @data="handleData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedData: ''
    };
  },
  methods: {
    handleData(data) {
      this.receivedData = data;
    }
  }
}
</script>

 

자식 컴포넌트 에서는 @'데이터명'="부모의 함수명" 해서 받음

 

그럼 부모의 함수쪽에서 패러미터로 해당 데이터 받을 수 있음

그럼 그걸로 this.부모쪽 데이터 = 패러미터; 해서 받기

 

넘겨주는 데이터가 여러개인 경우에는

 

부모

<template>
  <button @click="sendData">전송</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      const data1 = '전송된 데이터1';
      const data2 = '전송된 데이터2';
      this.$emit('data', data1, data2);
    }
  }
}
</script>

 

여전히 데이터명은 하나인 상태로

this.$emit('데이터명', 데이터1, 데이터2); 해서 넘기고

 

자식

<template>
  <div>
    <p>부모 컴포넌트에서 받은 데이터: {{ receivedData }}</p>
    <child-component @data="handleData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedData: ''
    };
  },
  methods: {
    handleData(data1, data2) {
      this.receivedData = `${data1} ${data2}`;
    }
  }
}
</script>

 

이렇게 패러미터 부분을 data1, data2 해서 받아도 되고

 

혹은

<template>
  <div>
    <p>부모 컴포넌트에서 받은 데이터1: {{ receivedData1 }}</p>
    <p>부모 컴포넌트에서 받은 데이터2: {{ receivedData2 }}</p>
    <child-component @data="handleData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedData1: '',
      receivedData2: ''
    };
  },
  methods: {
    handleData(data) {
      this.receivedData1 = data.data1;
      this.receivedData2 = data.data2;
    }
  }
}
</script>

 

이렇게 data 하나로 받은 다음 나눠도 된다고 함