Vue의 여러 레벨에서 데이터를 전달하기 위해 제공 및 주입을 사용하는 팁

Vue에서 여러 레벨에 걸쳐 데이터를 전송하기 위한 Provide 및 Inject 사용 팁

Vue 개발에서 구성 요소 간 데이터 전송은 매우 일반적인 요구 사항입니다. 일반적으로 Props 및 Emit 메서드를 통해 구성 요소 간에 데이터를 전송할 수 있지만 구성 요소 간에 여러 수준의 중첩이 있는 경우 이 방법은 더 번거로워지고 코드 결합이 발생하기가 매우 쉽습니다. 이때 Vue에서 제공하고 주입하는 것이 유용할 수 있습니다.

provide와 inject는 Vue 버전 2.2.0에 도입된 새로운 기능입니다. 이 두 API는 레이어별로 데이터를 전달하는 작업을 쉽게 구현할 수 있습니다. 다음 예에서는 여러 수준의 중첩 구성 요소가 포함된 예를 사용하여 제공 및 주입을 사용하여 수준 간 데이터 전송을 달성하는 방법을 보여줍니다.

다음과 같은 다중 레이어 중첩 구성 요소가 있다고 가정합니다.

<template>
  <div>
    <child1></child1>
  </div>
</template>

<script>
import child1 from './child1.vue';
export default {
  components: {
    child1
  }
};
</script>

<template>
  <div>
    <child2></child2>
  </div>
</template>

<script>
import child2 from './child2.vue';
export default {
  components: {
    child2
  }
};
</script>

<template>
  <div>
    <p>{{message}}</p>
    <grandchild></grandchild>
  </div>
</template>

<script>
import grandchild from './grandchild.vue';
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  components: {
    grandchild
  }
};
</script>

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

이 예에서는 Grandchild 구성 요소의 Parent 구성 요소에 정의된 메시지 데이터를 가져오려고 합니다. 구체적인 구현은 다음과 같습니다.

Parent 구성 요소의 Provide 속성을 사용하여 전달해야 하는 데이터를 제공합니다.

<template>
  <div>
    <child1 :message="message"></child1>
  </div>
</template>

<script>
export default {
  provide: {
    message: 'Hello Vue!'
  }
};
</script>

Grandchild 구성 요소의 inject 속성을 사용하여 Provide에서 제공한 데이터를 삽입합니다.

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

In 이렇게 하면 Grandchild 컴포넌트에서 Parent 컴포넌트에서 제공하는 메시지 데이터를 쉽게 얻을 수 있습니다.

프로바이더와 인젝션에 고정 데이터를 사용하는 것 외에도 프로바이더와 인젝션에 메서드를 사용하여 데이터를 제공하고 얻을 수도 있습니다. 예를 들어 메시지 데이터를 동적으로 설정하기 위해 Parent 구성 요소에 메서드를 제공합니다.

<template>
  <div>
    <child1 :set-message="setMessage"></child1>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      setMessage: message => {
        this.message = message;
      }
    };
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

Child1 구성 요소에서 setMessage 메서드를 호출하여 메시지 데이터를 설정합니다.

<template>
  <div>
    <child2 :message="message"></child2>
    <button @click="setMessage">Set Message</button>
  </div>
</template>

<script>
export default {
  props: ['setMessage'],
  data() {
    return {
      message: 'Hello World!'
    };
  }
};
</script>

Grandchild 구성 요소의 inject 속성을 통해 setMessage 메서드를 주입합니다.

<template>
  <div>
    <p>{{message}}</p>
    <button @click="setMessage">Set Parent Message</button>
  </div>
</template>

<script>
export default {
  inject: ['setMessage', 'message']
};
</script>

이를 통해 Grandchild 컴포넌트는 Parent 컴포넌트의 setMessage 메소드를 호출하여 메시지 데이터를 동적으로 설정할 수 있습니다.

요약:

provider 및 inject 속성을 사용하면 레벨 간에 데이터를 전달하려는 목적을 쉽게 달성할 수 있습니다. 이 두 가지 속성을 사용할 때 코드 단순성과 유지 관리성 목표를 달성하려면 깊은 중첩과 구성 요소 결합을 피하도록 주의해야 합니다.

위 내용은 Vue의 여러 레벨에서 데이터를 전달하기 위해 제공 및 주입을 사용하는 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!