Vue.js 컴포지션 옵션

Vue 인스턴스 생성 시 컴포넌트의 상속 관계나 기본 동작에 영향을 미치는 옵션을 설정할 수 있습ㄴ디ㅏ. 이를 컴포지션 옵션이라고 합니다.

 

1. parent 옵션

parent 옵션은 Vue 컴포넌트의 부모 컴포넌트를 정의하는 데 사용됩니다. 이 옵션을 사용하면 자식 컴포넌트가 부모 컴포넌트와 상호작용하거나 부모 컴포넌트의 데이터나 메서드를 사용할 수 있습니다.

<template> <div> <p>{{ parentData }}</p> </div> </template> <script> export default { parent: 'ParentComponent', // 부모 컴포넌트의 이름을 지정 }; </script>

위의 코드에서 parent 옵션은 ParentComponent라는 부모 컴포넌트와의 관계를 정의합니다. 자식 컴포넌트에서 parentData를 사용하여 부모 컴포넌트의 데이터에 접근할 수 있습니다.

 

2. mixins 옵션

mixins 옵션은 컴포넌트에서 재사용 가능한 코드와 로직을 정의하는 데 사용됩니다. 믹스인은 객체 형태로 정의되며, 컴포넌트에서 불러와서 사용할 수 있습니다.

// mixins.js export const myMixin = { data() { return { mixinData: '이 데이터는 믹스인에서 옵니다.' }; }, methods: { sayHello() { console.log('안녕하세요!'); } } }; <template> <div> <p>{{ mixinData }}</p> <button @click="sayHello">인사하기</button> </div> </template> <script> import { myMixin } from './mixins.js'; export default { mixins: [myMixin], // 믹스인을 컴포넌트에 적용 }; </script>

위의 코드에서 mixins 옵션을 사용하여 myMixin 믹스인을 컴포넌트에 적용했습니다. 이를 통해 mixinData와 sayHello 메서드를 컴포넌트에서 사용할 수 있습니다.

 

 

3. provide 옵션

provide 옵션은 데이터를 하위 컴포넌트에 제공하기 위해 상위 컴포넌트에서 사용됩니다. 부모 컴포넌트에서 데이터를 provide로 설정하고, 이 데이터는 하위 컴포넌트에서 inject로 가져올 수 있습니다.

<!-- ParentComponent.vue --> <template> <div> <child-component></child-component> </div> </template> <script> export default { provide: { message: '안녕, Vue.js!' } }; </script>

 

 

4. inject 옵션

inject 옵션은 하위 컴포넌트에서 데이터를 주입받기 위해 사용됩니다. inject를 사용하여 부모 컴포넌트에서 제공한 데이터를 하위 컴포넌트에서 사용할 수 있습니다.

<!-- ChildComponent.vue --> <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { inject: ['message'] }; </script>

위의 코드에서 ParentComponent에서 message를 provide로 제공하고, ChildComponent에서 inject로 message를 가져와서 사용합니다. 이를 통해 부모 컴포넌트와 자식 컴포넌트 간에 데이터를 전달하고 공유할 수 있습니다.

parent 옵션은 부모-자식 컴포넌트 간의 관계를 정의하는 데 사용되며, mixins 옵션은 재사용 가능한 코드를 여러 컴포넌트에서 공유하고 사용하는 데 사용됩니다. 이 두 가지 옵션을 통해 Vue 컴포넌트를 더 효율적으로 구성하고 코드를 재사용할 수 있습니다.

provide 및 inject는 Vue 컴포넌트 간에 데이터를 효과적으로 전달하고 공유하기 위한 강력한 메커니즘을 제공합니다. 이를 통해 컴포넌트 간에 데이터 의존성을 관리하고 재사용 가능한 컴포넌트를 작성하는 데 도움이 됩니다.