Vue 구성 요소 간 통신을 위한 6가지 방법

Vue는 단일 페이지 애플리케이션을 구축하는 데 널리 사용되는 JavaScript 프레임워크입니다. Vue에서 컴포넌트는 애플리케이션을 구축하기 위한 기본 단위입니다. 컴포넌트는 데이터를 표시하고 처리하는 데 사용되는 재사용 가능한 코드 블록입니다. 구성 요소 통신은 구성 요소 간의 데이터 전송 및 상호 작용을 위한 핵심 메커니즘 중 하나입니다. 이 기사에서는 구성 요소가 통신하는 6가지 방법을 살펴보겠습니다.

1. Props 및 Events

Props 및 Events는 Vue의 가장 기본적인 구성 요소 통신 방법입니다. props를 통해 상위 구성 요소는 데이터를 하위 구성 요소에 전달합니다. 하위 구성 요소는 이벤트 생성자를 통해 상위 구성 요소에 데이터를 보냅니다. 이 통신 방식은 단방향 전송이 특징입니다.

상위 구성 요소는 props를 통해 하위 구성 요소에 데이터를 전달합니다.

<template>
  <child-component :message="parentMessage"></child-component>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    data() {
      return {
        parentMessage: 'this is parent'
      }
    },
    components: {
      ChildComponent
    }
  }
</script>

하위 구성 요소에서는 props를 선언하고 props를 사용하여 상위 구성 요소로부터 데이터를 수신해야 합니다.

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    props: ['message']
  }
</script>

그런 다음 하위 구성 요소는 데이터를 이벤트를 통한 상위 구성요소:

<template>
  <button @click="updateParentMessage">Update Parent Message</button>
</template>
<script>
  export default {
    methods: {
      updateParentMessage() {
        this.$emit('update-message', 'this is child');
      }
    }
  }
</script>

상위 구성요소에서는 하위 구성요소에 대한 이벤트를 수신하고 이벤트 청취 기능에서 하위 구성요소로부터 데이터를 수신해야 합니다.

<template>
  <child-component :message="parentMessage" @update-message="updateMessage"></child-component>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    data() {
      return {
        parentMessage: 'this is parent'
      }
    },
    components: {
      ChildComponent
    },
    methods: {
      updateMessage(message) {
        this.parentMessage = message;
      }
    }
  }
</script>

2 Vuex는 공식 플러그입니다. Vue의 상태 관리를 위해. Vuex는 전역 상태 관리 모델을 구현합니다. 저장소를 통해 애플리케이션의 모든 구성 요소 상태를 중앙에서 관리합니다. 여러 구성 요소가 상태를 공유하는 경우 Vuex를 사용하면 구성 요소 간의 데이터 교환 및 통신을 더 쉽게 관리할 수 있습니다.

먼저 Vuex 스토어를 생성해야 합니다:

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    message: 'hello world'
  },
  mutations: {
    updateMessage(state, message) {
      state.message = message
    }
  },
  actions: {
    updateMessage({ commit }, message) {
      commit('updateMessage', message)
    }
  },
  getters: {
    getMessage: state => state.message
  }
})

export default store

컴포넌트에서 $store를 사용하여 스토어의 상태에 액세스하고 commit 메소드를 사용하여 상태를 수정하는 변형을 제출할 수 있습니다:

<template>
  <div>{{ this.$store.getters.getMessage }}</div>
  <button @click="updateMessage">Update Message</button>
</template>
<script>
  export default {
    methods: {
      updateMessage() {
        this.$store.dispatch('updateMessage', 'hello vuex')
      }
    }
  }
</script>

Three, $parent 및 $children

Vue의 모든 구성 요소에는 $parent 및 $children 속성이 있습니다. $parent 속성은 구성 요소의 상위 구성 요소를 가리키고 $children 속성은 구성 요소의 하위 구성 요소를 가리킵니다. $parent 및 $children 속성을 통해 구성 요소는 상위 및 하위 구성 요소의 데이터와 메서드에 직접 액세스할 수 있습니다.

예를 들어 상위 구성 요소는 $children 속성을 통해 하위 구성 요소의 데이터 및 메서드에 액세스할 수 있습니다.

<template>
  <div>
    {{ $children[0].message }}
    <button @click="$children[0].updateMessage">Update message</button>
  </div>
</template>

하위 구성 요소에서는 message 및 updateMessage 메서드를 정의해야 합니다.

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'hello child'
      }
    },
    methods: {
      updateMessage() {
        this.message = 'hello parent'
      }
    }
  }
</script>

4. $refs

Vue의 모든 구성 요소에는 $refs 속성이 있습니다. $refs 속성은 구성 요소의 ref 속성을 사용하여 명명된 하위 구성 요소 또는 DOM 요소에 대한 참조를 포함하는 개체입니다. $refs 속성을 통해 구성 요소는 서로를 참조하고 호출할 수 있습니다.

예를 들어, 상위 구성 요소의 ref 속성을 통해 하위 구성 요소의 참조를 얻을 수 있습니다:

<template>
  <div>
    <child-component ref="childComponent"></child-component>
    <button @click="updateMessage">Update message</button>
  </div>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    components: {
      ChildComponent
    },
    methods: {
      updateMessage() {
        this.$refs.childComponent.updateMessage()
      }
    }
  }
</script>

하위 구성 요소에서는 updateMessage 메서드를 정의해야 합니다:

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'hello child'
      }
    },
    methods: {
      updateMessage() {
        this.message = 'hello parent'
      }
    }
  }
</script>

5. 이벤트 버스 Vue 구성요소 간에 이벤트를 효율적으로 전달하는 널리 사용되는 중앙 이벤트 시스템입니다. 이벤트 버스는 $emit 메소드를 통해 다른 Vue 구성 요소에 이벤트를 보낼 수 있고 $on 메소드를 통해 다른 Vue 구성 요소에서 보낸 이벤트를 받을 수도 있는 간단한 Vue 인스턴스입니다.

이벤트 버스를 구현할 때 새로운 Vue 인스턴스를 만들어야 합니다:

import Vue from 'vue'

const bus = new Vue()

export default bus

그런 다음 구성 요소에 이벤트 버스를 도입하고 $emit를 사용하여 이벤트를 보내고 $on을 사용하여 이벤트를 받을 수 있습니다.

// 发送事件
import Bus from './Bus.js'

Bus.$emit('event-name', data)

// 接收事件
import Bus from './Bus.js'

Bus.$on('event-name', (data) => {
  console.log(data)
})

6. Inject

Vue 2.2의 새로운 Provide 및 Inject는 고급 구성 요소 통신 방법입니다. Provide 및 Inject를 사용하면 상위 구성 요소가 하위 구성 요소를 직접 전달하는 것이 아니라 모든 하위 구성 요소에 데이터를 전달할 수 있습니다. Provide 및 Inject는 props, events 및 $parent/$children과 다른 구성 요소 통신 형식이며 보다 유연하고 캡슐화된 통신 방법입니다.

부모 컴포넌트는 제공을 통해 데이터를 제공합니다:

<template>
  <child-component></child-component>
</template>
<script>
  export default {
    provide: {
      message: 'hello provide'
    }
  }
</script>

자식 컴포넌트에서는 부모 컴포넌트가 전달한 데이터를 수신하기 위해 inject를 정의해야 합니다.

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

6가지 Vue 컴포넌트 통신 방법에 대한 소개입니다. 다양한 애플리케이션 시나리오에는 다양한 구성 요소 통신 방법이 필요합니다. 이러한 통신 방법을 익히면 Vue 구성 요소를 보다 효율적이고 간단하며 유연하게 개발할 수 있습니다.

위 내용은 Vue 구성 요소 간 통신을 위한 6가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!