$parent와 $children을 사용하여 Vue의 상위 구성요소와 하위 구성요소 간에 통신하는 방법은 무엇입니까?

Vue에서 부모-자식 구성 요소 통신을 위해 $parent 및 $children을 어떻게 사용하나요?

Vue에서 구성 요소는 애플리케이션을 구축하기 위한 기본 단위입니다. 개발 과정에서 구성 요소 간의 통신은 매우 일반적인 요구 사항입니다. Vue는 $parent와 $children을 포함한 구성 요소 간의 통신을 구현하는 몇 가지 내장 메서드를 제공합니다.

$parent는 현재 구성요소의 상위 구성요소를 나타내고, $children은 현재 구성요소의 모든 하위 구성요소를 나타냅니다. 이를 통해 상위 구성 요소와 하위 구성 요소 간에 데이터를 전달하고 메서드를 호출할 수 있습니다.

다음으로 간단한 예를 사용하여 부모-자식 구성 요소 통신에 $parent 및 $children을 사용하는 방법을 보여 드리겠습니다.

먼저 상위 구성 요소와 하위 구성 요소를 만들어야 합니다. 상위 구성 요소에서 데이터 속성을 생성하고 이를 하위 구성 요소에 전달합니다. 하위 구성 요소는 이 데이터를 수정하고 수정된 데이터를 상위 구성 요소에 다시 전달합니다.

상위 구성 요소의 코드는 다음과 같습니다.

<template>
  <div>
    <h2>父组件</h2>
    <p>父组件的数据：{{ parentData }}</p>
    <child-component :childData="parentData" @change="handleChange"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: "父组件初始数据"
    }
  },
  methods: {
    handleChange(newData) {
      this.parentData = newData
    }
  }
}
</script>

상위 구성 요소에서는 상위 구성 요소인 parentData의 데이터를 하위 구성 요소인 ChildComponent에 전달하고, pass @change하위 컴포넌트의 change 이벤트를 수신합니다. 하위 컴포넌트의 데이터가 변경되면 상위 컴포넌트의 데이터가 를 통해 업데이트됩니다. handlerChange 메소드. parentData传递给子组件ChildComponent，并通过@change监听子组件的change事件，当子组件的数据发生变化时，将通过handleChange方法更新父组件的数据。

接下来，我们来看一下子组件的代码：

<template>
  <div>
    <h4>子组件</h4>
    <p>子组件的数据：{{ childData }}</p>
    <button @click="handleClick">修改父组件数据</button>
  </div>
</template>

<script>
export default {
  props: {
    childData: {
      type: String,
      required: true
    }
  },
  methods: {
    handleClick() {
      const newData = this.childData + "（已修改）"
      this.$emit("change", newData)
    }
  }
}
</script>

在子组件中，我们接收父组件传递过来的数据childData作为props，并渲染到页面上。当点击按钮时，通过handleClick方法修改子组件的数据，然后通过$emit方法触发change

다음으로 자식 컴포넌트의 코드를 살펴보겠습니다.

rrreee

자식 컴포넌트에서는 부모 컴포넌트가 전달한 childData 데이터를 props로 받아 페이지에 렌더링합니다. 버튼을 클릭하면 handleClick 메서드를 통해 하위 구성 요소의 데이터가 수정되고, $emit를 통해 change 이벤트가 트리거됩니다. 메서드를 사용하면 수정된 데이터가 상위 구성 요소에 전달됩니다.

이 시점에서 상위 구성 요소와 하위 구성 요소 간의 데이터 전송 및 통신이 완료되었습니다. 페이지에 상위 컴포넌트를 렌더링하면 상위 컴포넌트의 데이터와 하위 컴포넌트의 데이터가 올바르게 표시되는 것을 볼 수 있으며, 하위 컴포넌트의 버튼을 클릭하면 상위 컴포넌트의 데이터가 표시됩니다. 이에 따라 수정되었습니다. 🎜🎜위의 예를 통해 $parent 및 $children을 사용하면 상위 구성 요소와 하위 구성 요소 간에 데이터를 쉽게 전송하고 통신할 수 있음을 알 수 있습니다. 그러나 상위 구성 요소와 하위 구성 요소 사이에는 일정한 결합이 있기 때문에 실제 개발 프로세스에서는 특정 요구 사항과 시나리오에 따라 적절한 통신 방법을 선택해야 합니다. 🎜

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