Vue2.x(props, $emit, Vuex)에서 컴포넌트 통신 구현에 대한 전체 가이드

Vue2.x(props, $emit, Vuex)에서 구성요소 통신 구현에 대한 전체 가이드

Vue는 최신 JavaScript 프레임워크로서 웹 애플리케이션을 개발할 때 매우 널리 사용됩니다. Vue의 구성요소화된 아키텍처를 통해 개발자는 코드와 기능을 쉽게 분리하는 동시에 다양한 구성요소를 통해 유연한 통신을 가능하게 합니다.

이 기사에서는 Vue 애플리케이션을 구축할 때 리소스를 더 잘 관리하는 데 도움이 되는 Vue2.x의 세 가지 구성 요소 통신 방법인 props, $emit 및 Vuex를 살펴보겠습니다.

Props

props는 Vue의 컴포넌트 매개변수 전달 방법 중 하나입니다. props를 사용하여 자식 컴포넌트에 값을 전달할 수 있습니다. 하위 컴포넌트에서 props의 값은 읽기 전용이므로 수정할 수 없습니다. 이를 통해 단방향 데이터 흐름이 가능해 Vue 애플리케이션을 더 쉽게 유지 관리하고 디버깅할 수 있습니다.

예는 다음과 같습니다.

상위 구성 요소에서 "parent"라는 prop을 만들고 "message"라는 prop을 전달할 수 있습니다.

<template>
  <div>
    <child :message="msg"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "Parent",
  components: {
    Child
  },
  data() {
    return {
      msg: "Hello World!"
    };
  }
};
</script>

자식 구성 요소에서는 전달된 props 값을 받아 템플릿에서 사용할 수 있습니다.

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

<script>
export default {
  name: "Child",
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

이 예에서 "msg"는 상위 구성 요소에 정의되어 있고 "message"는 props의 이름입니다. 이는 상위 구성 요소의 값과 일치해야 합니다. 하위 컴포넌트는 "props" 옵션을 사용하여 전달되어야 하는 props의 데이터 유형과 값을 정의해야 합니다.

props를 통한 데이터 전달의 기본 예시입니다. 전달해야 하는 props가 여러 개인 경우 객체에 넣고 하위 구성 요소에 전달할 수 있습니다.

$emit

$emit은 Vue에서 널리 사용되는 또 다른 구성 요소 통신 방법입니다. $emit를 사용하여 사용자 정의 이벤트를 트리거하고 데이터를 상위 구성 요소에 전달할 수 있습니다. props와 달리 $emit는 양방향 데이터 전송이 가능하므로 Vue 애플리케이션의 구성 요소 간 리소스 공유가 더욱 편리해집니다.

props와 달리 $emit는 하위 구성 요소에서 상위 구성 요소로 데이터를 전달할 수 있습니다. 예는 다음과 같습니다.

이 예에서는 사용자 정의 이벤트 이름 "인사말"을 정의하고 버튼을 클릭할 때 이벤트를 트리거합니다. 또한 선택한 항목을 이벤트에 전달합니다.

<template>
  <div>
    <button @click="sayHi()">Click me</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  methods: {
    sayHi() {
      this.$emit("greeting", {
        message: "Hello World!"
      });
    }
  }
};
</script>

상위 구성 요소에서는 하위 구성 요소의 사용자 정의 이벤트를 수신하고 이벤트가 실행될 때 전달된 데이터를 사용할 수 있습니다.

<template>
  <div>
    <child @greeting="handleGreeting"></child>
    <div>{{ greeting }}</div>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "Parent",
  components: {
    Child
  },
  data() {
    return {
      greeting: ""
    };
  },
  methods: {
    handleGreeting(data) {
      this.greeting = data.message;
    }
  }
};
</script>

이 예에서 "handleGreeting"은 이벤트를 처리하는 데 사용되는 메서드입니다. 이 메소드는 하위 구성요소에 의해 트리거된 사용자 정의 이벤트를 매개변수로 수신합니다. 데이터 전송은 하위 구성 요소의 $emit 이벤트에서 얻을 수 있습니다.

Vuex

Vuex는 Vue.js 애플리케이션을 위한 상태 관리 라이브러리입니다. 이를 통해 구성 요소가 상태를 공유할 수 있으므로 구성 요소 간의 통신이 더욱 쉽고 효율적으로 이루어집니다.

예는 다음과 같습니다.

이 예에서는 "store"라는 Vuex 스토어를 생성하여 데이터를 공유합니다. 상태 속성에서 공유해야 하는 데이터를 정의할 수 있습니다. mutations 속성에서는 저장소의 데이터를 수정하는 함수를 정의할 수 있습니다. getter 속성에서는 데이터를 처리하고 공유 값을 반환하는 함수를 정의할 수 있습니다.

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    greeting: "Hello World!"
  },
  mutations: {
    changeGreeting(state, payload) {
      state.greeting = payload.greeting;
    }
  },
  getters: {
    getGreeting(state) {
      return state.greeting;
    }
  }
});

모든 Vue 구성 요소에서 스토어의 데이터와 기능을 사용할 수 있습니다. 이 예에서는 두 개의 버튼이 설정되어 있습니다. "인사말" 버튼을 클릭하면 매장에 "인사말" 속성 값이 표시됩니다. "인사말 변경" 버튼은 commit 함수를 통해 mutations 속성에 정의한 함수를 호출하여 스토어의 "인사말" 값을 변경합니다.

<template>
  <div>
    <div>{{ greeting }}</div>
    <button @click="getGreeting">greeting</button>
    <button @click="changeGreeting">change greeting</button>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";

export default {
  name: "Child",
  computed: {
    ...mapGetters(["getGreeting"])
  },
  methods: {
    ...mapMutations(["changeGreeting"]),
    getGreeting() {
      alert(this.getGreeting);
    }
  }
};
</script>

이 예에서는 "mapGetters" 및 "mapMutations"를 사용하여 저장소의 데이터와 함수를 구성 요소의 계산된 속성 및 메서드에 매핑할 수 있습니다. 이 메서드에서는 경고를 사용하여 매장의 "인사말" 속성 값을 표시합니다. "인사말 변경" 버튼을 클릭하면 상점의 "인사말" 속성을 변경하기 위해 ChangeGreeting 함수가 호출됩니다.

요약

위는 Vue2.x에서 컴포넌트 통신을 구현하는 세 가지 방법인 props, $emit 및 Vuex입니다. 실제 개발에서는 다양한 요구 사항과 시나리오에 따라 사용할 통신 방법을 선택할 수 있습니다.

props를 통해 단방향 데이터 전송을 달성하여 구성 요소 간 명확한 데이터 흐름을 보장할 수 있습니다. $emit는 구성 요소 간 양방향 데이터 전송을 수행하여 Vue 애플리케이션의 구성 요소 간 리소스 공유를 더욱 편리하게 만듭니다. 저장소에 저장할 수 있어 구성 요소 간 통신이 더 쉽고 효율적으로 이루어집니다.

위 내용은 Vue2.x(props, $emit, Vuex)에서 컴포넌트 통신 구현에 대한 전체 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!