Vue에서 상위 구성요소와 하위 구성요소 간에 통신하는 방법

프런트 엔드 프레임워크의 지속적인 개발로 인해 Vue.js는 많은 개발자가 선호하는 프레임워크 중 하나가 되었습니다. Vue.js는 효율적이고 유연하며 안정성이 뛰어나고 유지 관리가 가능한 개발 방법을 제공하는 진보적인 JavaScript 프레임워크입니다. Vue.js에서 구성 요소는 중요한 개념입니다. 복잡한 페이지를 구현하든 구성 요소화된 애플리케이션을 구축하든 이를 구현하려면 구성 요소를 사용해야 합니다.

Vue.js에서는 구성 요소를 다른 구성 요소에 중첩하여 상위-하위 구성 요소 관계를 형성할 수 있습니다. 이때 상위 구성 요소와 하위 구성 요소는 복잡한 비즈니스 로직을 완료하기 위해 서로 통신해야 하는 경우가 많습니다. 이 기사에서는 Vue.js에서 상위 구성 요소와 하위 구성 요소 간에 통신하는 방법을 소개합니다.

1. 단방향 데이터 흐름

Vue.js에서는 일반적으로 단방향 데이터 흐름 형태로 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전송합니다. props 속성과 하위 구성 요소는 직접 수정할 수 없습니다.

상위 구성 요소는 아래와 같이 하위 구성 요소에 props 속성을 정의하여 데이터를 전달합니다.

<template>
  <div>
    <!-- 父组件向子组件传递 count 数据 -->
    <child-component :count="count"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      count: 0
    }
  }
}
</script>

아래와 같이 하위 구성 요소의 props를 통해 상위 구성 요소가 전달한 데이터를 받습니다.

<template>
  <div>
    <!-- 子组件通过 props 接收 count 数据 -->
    <div>count: {{ count }}</div>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      default: 0
    }
  }
}
</script>

이렇게 하면 상위 구성 요소가 완성됩니다. 하위 구성 요소에 데이터를 전달하는 프로세스입니다. 하위 구성 요소는 수신된 데이터를 렌더링 작업에 사용할 수 있지만 데이터를 직접 수정할 수는 없습니다.

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

Vue.js에서 하위 구성 요소는 사용자 정의 이벤트를 통해 상위 구성 요소에 데이터를 전달합니다. 자식 컴포넌트는 $emit 메소드를 통해 이벤트를 트리거하고, 부모 컴포넌트는 이벤트를 바인딩하기 위해 자식 컴포넌트에 v-on 지시문을 추가하여 수신 대기합니다.

예를 들어, 버튼을 클릭하면 이벤트가 발생하고 아래와 같이 $emit 메서드를 통해 상위 구성 요소에 데이터가 전달됩니다.

<template>
  <div>
    <button @click="sendData">传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData () {
      // 通过 $emit 方法触发事件，并传递数据
      this.$emit('send-data', '这是子组件传递的数据')
    }
  }
}
</script>

상위 구성 요소에서 다음을 사용합니다. v-on 지시어는 이벤트를 바인딩하고 하위 구성 요소를 수신합니다. 구성 요소에 의해 트리거된 이벤트는 아래와 같이 하위 구성 요소가 전달한 데이터를 받습니다.

<template>
  <div>
    <!-- 绑定子组件事件，监听子组件触发的事件 -->
    <child-component @send-data="getData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    getData (msg) {
      console.log(msg) // 打印子组件传递的数据
    }
  }
}
</script>

이렇게 하면 하위 구성 요소에서 데이터를 전달하는 프로세스가 완료됩니다. 하위 구성요소는 이벤트를 트리거하고 $emit 메소드를 통해 데이터를 전달하며, 상위 구성요소는 이벤트를 전달하여 하위 구성요소가 전달한 데이터를 수신하고 수신합니다.

3. $parent 및 $children 속성을 사용하세요

위의 두 가지 방법 외에도 Vue.js는 상위 및 하위 구성 요소 간의 통신을 구현하기 위해 $parent 및 $children이라는 두 가지 속성도 제공합니다. $parent 속성을 사용하여 하위 구성 요소에 있는 상위 구성 요소의 데이터 및 메서드에 액세스하고, $children 속성을 사용하여 상위 구성 요소에 있는 하위 구성 요소의 데이터 및 메서드에 액세스합니다.

예를 들어, 하위 구성 요소에 있는 상위 구성 요소의 데이터 및 메서드에 액세스하려면 다음과 같이 하세요.

<template>
  <div>
    <button @click="getParentData">获取父组件的数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    getParentData () {
      // 使用 $parent 属性访问父组件的数据和方法
      console.log(this.$parent.count) // 访问父组件的 count 数据
      this.$parent.sayHello() // 调用父组件的 sayHello 方法
    }
  }
}
</script>

상위 구성 요소에 있는 하위 구성 요소의 데이터 및 메서드에 액세스하려면 다음과 같이 $children 속성을 사용할 수 있습니다.

<template>
  <div>
    <button @click="getChildData">获取子组件的数据</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    getChildData () {
      // 使用 $children 属性访问子组件的数据和方法
      console.log(this.$children[0].count) // 访问第一个子组件的 count 数据
      this.$children[0].sayHello() // 调用第一个子组件的 sayHello 方法
    }
  }
}
</script>

그러나 상위 및 하위 구성 요소 간의 통신에 $parent 및 $children 속성을 사용하는 것은 Vue.js의 구성 요소 통신 원칙을 따르지 않으므로 자주 사용하는 것은 권장되지 않습니다. 이 접근 방식은 하위 구성 요소와 상위 구성 요소를 긴밀하게 연결하므로 코드를 확장하고 유지 관리하기가 어렵습니다.

요약

Vue.js에서는 props 및 $emit 메서드를 사용하여 상위 구성 요소와 하위 구성 요소 간의 단방향 데이터 흐름 및 양방향 바인딩을 구현할 수 있습니다. 또한 $parent 및 $children 속성을 사용하여 상위를 구현할 수도 있습니다. -하위 통신. 어떤 방법을 사용하든 긴밀한 결합을 피하기 위해 항상 구성 요소 통신의 확장 및 유지 관리를 고려해야 하며, 이를 통해 코드를 더 간단하고 확장 가능하며 유지 관리하기 쉽게 만듭니다.

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