$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

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