[vue] 자식 컴포넌트의 데이터를 slot 에서 사용하기 > IT 기술백서

IT 기술백서

직접 알아내거나 검색하기 귀찮아서 모아 둔 것

JavaScript | [vue] 자식 컴포넌트의 데이터를 slot 에서 사용하기

본문

child 컴포넌트가 아래와 같다고 하자.

 

- child.vue -

[code]

<template>

  <div>

    <slot>

      {{ user.name }}

    </slot>

  </div>

</template>


<script>

export default {

  data() {

    return {

      user: {

        name: '홍길동',

        age: 30,

      },

    }

  },

}

</script>

[/code]

 

이 컴포넌트는 user 의 name을 출력한다.  이때 name 대신 age 를 출력하고 싶다고 할때 부모컴포넌트에서 아래와 같이 사용했다.

 

- parent.vue -

[code]

<child>

  {{ user.age }}

</child>

[/code]

하지만 이 코드는 작동하지 않는다.  slot 안에 사용한 user 는 자식컴포넌트(child.vue)의 데이터이고 부모컴포넌트(parent.vue)는 이것을 알지 못하기 때문이다.

 

이때 자식컴포넌트에서 자신의 데이터를 부모가 사용할 수 있게 하는 방법이 있다.  자신의 데이터를 slot 에 바인딩 해주면 된다.

형식은 아래와 같다.

[code]

<slot v-bind:부모에게전달될변수이름="데이터">

[/code]

 

이것을 적용한 코드는 아래와 같다.

- child.vue -

[code]

<template>

  <div>

    <slot :person="user">

      {{ user.name }}

    </slot>

  </div>

</template>


<script>

export default {

  data() {

    return {

      user: {

        name: '홍길동',

        age: 30,

      },

    }

  },

}

</script>

[/code]

 

부모컴포넌트로는 아래와 같이 json 형식의 묶음으로 전달된다.

[code]

{

  person: {

    name: '홍길동',

    age: 30,

  }

}

[/code]

 

부모컴포넌트에서는 v-slot:슬롯이름="[Object]" 형식으로 받아올 수 있다.  이를 적용한 코드는 아래와 같다.

- parent.vue -

[code]

<child>

  <template v-slot:default="data">

    {{ data.person.age }}

  </template>

</child>

[/code]

 

결과는 age 즉, 30이 출력된다.

 

댓글 0개

등록된 댓글이 없습니다.

Menu