Vue 문서에서 부모-자식 컴포넌트의 양방향 데이터 바인딩 기능 구현 방법

Vue는 웹 인터페이스 구축을 위한 최신 JavaScript 프레임워크로, 단순성과 사용 용이성, 탁월한 성능 및 자세한 문서화로 인해 개발자들이 선호합니다. 그 중 상위 컴포넌트와 하위 컴포넌트 간의 양방향 데이터 바인딩은 Vue 컴포넌트 통신의 핵심 기능 중 하나입니다. 컴포넌트의 상태를 하위 컴포넌트에 빠르게 전달하고, 하위 컴포넌트의 상태 변화를 모니터링하고 피드백할 수 있습니다. 상위 구성 요소에 연결하여 양방향 데이터 흐름을 완료합니다. 이 글에서는 Vue 문서에서 부모-자식 컴포넌트의 양방향 데이터 바인딩 기능 구현 방법을 소개합니다.

상위 구성요소와 하위 구성요소 간에 데이터를 전송하려면 props 및 $emit 메소드를 사용할 수 있습니다. 여기서 props는 Vue의 구성요소 매개변수이며 상위 구성요소에서 하위 구성요소로 데이터를 전송하는 데 사용되는 반면 $emit 메소드는 Vue 인스턴스의 통신 방법입니다. 하위 구성 요소에서 상위 구성 요소로 데이터를 전달하는 데 사용됩니다. 양방향 데이터 바인딩을 구현해야 하는 경우 상위 구성 요소의 props에 .v-model 수정자를 추가하고 하위 구성 요소에서 입력 이벤트를 트리거하여 상위 구성 요소의 값을 업데이트해야 합니다.

다음은 양방향 데이터 바인딩을 구현하는 상위-하위 구성 요소의 예입니다.

// 父组件
<template>
  <div>
    <label>姓名：</label>
    <input v-model="name">
    <ChildComponent v-model="name"></ChildComponent>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      name: ''
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <label>子组件输入：</label>
    <input type="text" :value="value" @input="updateValue($event.target.value)">
  </div>
</template>
<script>
export default {
  props: {
    value: String
  },
  methods: {
    updateValue(value) {
      this.$emit('input', value)
    }
  }
}
</script>

상위 구성 요소에서는 name이라는 변수를 정의하고 이를 하위 구성 요소 ChildComponent에 전달합니다. 자식 컴포넌트에서는 props를 사용하여 부모 컴포넌트가 전달한 값을 받고, v-model 수정자를 사용하여 양방향 데이터 바인딩을 구현하고, 자식 컴포넌트의 값을 부모 컴포넌트의 name 변수에 바인딩하고, $emit 메소드를 사용하여 입력 이벤트를 트리거하고 하위 구성 요소에 값을 전달합니다.

props에서 v-model 수정자를 사용할 때 상위 구성 요소에서 전달된 값을 받기 위해 value 속성을 정의해야 할 뿐만 아니라 하위 구성 요소에서 사용할 value라는 계산된 속성도 정의해야 합니다. 하위 구성 요소의 바인딩된 입력 상자 값입니다. 입력 상자의 값이 변경되면 updateValue 메서드를 사용하여 입력 이벤트를 트리거하고 업데이트를 위해 하위 구성 요소의 새 값을 상위 구성 요소에 전달합니다.

v-model 수정자를 사용하여 양방향 데이터 바인딩을 구현하는 것 외에도 Vue는 코드를 단순화하고 더 쉽게 읽고, 쓰고, 이해할 수 있도록 .sync 수정자를 제공합니다. 상위 구성 요소에서는 v-model을 :value.sync:

<template>
  <div>
    <label>姓名：</label>
    <input :value.sync="name">
    <ChildComponent :value.sync="name"></ChildComponent>
  </div>
</template>

로 대체합니다. 하위 구성 요소에서는 updateValue 메서드 메서드에서 this.$emit('update:value', value)를 사용하여 업데이트를 트리거합니다. 이벤트가 발생하면 업데이트를 위해 하위 구성 요소의 값을 상위 구성 요소에 전달할 수 있습니다.

Vue 문서의 상위-하위 컴포넌트 양방향 데이터 바인딩 기능 구현 방법은 v-model 및 .sync 수정자를 사용하여 편리하고 빠르며 효율적인 컴포넌트 통신 방법을 제공하여 애플리케이션 개발을 더 쉽게 실현합니다. 데이터 흐름 방식.

위 내용은 Vue 문서에서 부모-자식 컴포넌트의 양방향 데이터 바인딩 기능 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!