Vue 문서에서 단방향 데이터 흐름을 구현하는 방법 소개

Vue는 단방향 데이터 흐름 모델을 사용하여 구성 요소 간의 데이터 전송 및 통신을 제어하는 ​​인기 있는 JavaScript 프레임워크입니다. Vue 프레임워크 내에서 데이터는 상위 구성 요소에서 하위 구성 요소로만 전달될 수 있으며 하위 구성 요소는 상위 구성 요소 데이터를 직접 수정할 수 없습니다. 이 패턴을 사용하면 코드를 더욱 유지 관리하기 쉽고 안정적이며 쉽게 재사용할 수 있습니다.

이 글에서는 Vue 문서에서 단방향 데이터 흐름을 구현하는 방법을 소개합니다.

1. Prop 전달

Prop은 Vue 프레임워크에서 단방향 데이터 흐름을 구현하는 주요 방법 중 하나입니다. Vue에서는 Props를 사용하여 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있습니다. 하위 구성 요소가 받은 Prop 속성은 읽기 전용이며 상위 구성 요소의 데이터를 직접 수정할 수 없으며 내보내기 이벤트를 통해서만 상위 구성 요소와 통신할 수 있습니다.

상위 구성 요소의 v-bind 지시문을 사용하여 하위 구성 요소에 데이터를 전달합니다.

<template>
  <child-component :title="title"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      title: 'Hello, Vue!'
    }
  }
}
</script>

하위 구성 요소의 props 옵션은 상위 구성 요소에서 데이터를 받습니다.

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  props: {
    title: String
  }
}
</script>

위 코드에서는 title 속성이 정의됩니다. 문자열 유형으로 이는 유효성 검사와 유형 변환이 모두 Vue에서 처리됨을 의미합니다. 전달된 제목은 하위 구성 요소에서 수정할 수 없으며 계산 작업이나 표시에만 사용할 수 있습니다.

2. 사용자 정의 이벤트

Vue 프레임워크에서 상위 구성 요소와 하위 구성 요소는 사용자 정의 이벤트를 사용하여 통신합니다. 하위 구성요소는 Vue에서 제공하는 $emit 메소드를 사용하여 사용자 정의 이벤트를 트리거하고 데이터를 상위 구성요소에 전달할 수 있습니다. 상위 구성요소는 v-on 지시문을 통해 하위 구성요소가 내보낸 이벤트를 수신하여 데이터를 수신할 수 있습니다.

하위 구성 요소에서 사용자 정의 이벤트 트리거:

<template>
  <button @click="increment">{{ counter }}</button>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    increment() {
      this.counter++
      this.$emit('increment', this.counter)
    }
  }
}
</script>

상위 구성 요소에서 사용자 정의 이벤트 듣기:

<template>
  <child-component @increment="onIncrement"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    onIncrement(counter) {
      console.log(`Counter is ${ counter }`)
    }
  }
}
</script>

위 코드에서 하위 구성 요소는 $emit 메소드를 사용하여 트리거되는 증분 메소드를 정의합니다. 카운터 값을 매개변수로 상위 구성요소에 전달합니다. 상위 구성 요소는 v-on 지시어를 통해 하위 구성 요소에 바인딩된 increment 이벤트를 수신하고, 하위 구성 요소가 전달한 데이터를 수신하기 위한 onIncrement 메서드를 정의합니다.

3. $attrs 및 $listeners

때때로 클릭 및 변경 이벤트와 같은 상위 구성 요소의 하위 구성 요소 내부에 있는 기본 이벤트를 사용합니다. 이러한 이벤트가 제대로 작동하도록 Vue는 $attrs 및 $listeners라는 특수 속성을 제공합니다. $attrs를 사용하면 하위 구성 요소가 props로 정의되지 않은 모든 속성을 상위 구성 요소에 전달할 수 있으며, $listeners는 하위 구성 요소에 바인딩된 모든 이벤트(네이티브 이벤트 및 사용자 정의 이벤트 포함)를 상위 구성 요소에 전달할 수 있습니다.

하위 구성 요소에서 기본 이벤트가 있는 구성 요소 정의:

<template>
  <input type="text" @input="$emit('change', $event.target.value)">
</template>

<script>
export default {}
</script>

상위 구성 요소에서 하위 구성 요소를 사용하고 기본 이벤트를 바인딩합니다.

<template>
  <child-component v-on="$listeners"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  }
}
</script>

위 코드에서 상위 구성 요소는 $listeners에 v-on 지시어를 사용합니다. 하위 구성 요소가 바인딩된 기본 이벤트와 사용자 정의 이벤트를 상위 구성 요소에 전달할 수 있도록 하위 구성 요소에 전달됩니다.

요약

Vue 프레임워크의 단방향 데이터 흐름 패턴은 구성 요소 간의 통신을 더욱 명확하고 안정적으로 만듭니다. 구성요소 간의 데이터 전송 및 통신은 Prop, 사용자 정의 이벤트 및 $attrs/$listeners와 같은 방법을 사용하여 달성할 수 있습니다. 이러한 기술을 익히면 Vue 프레임워크를 더 잘 사용하여 사용자 요구 사항을 충족하는 애플리케이션을 개발하는 데 도움이 될 수 있습니다.

위 내용은 Vue 문서에서 단방향 데이터 흐름을 구현하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!