Vue 문서에서 컴포넌트 상위-하위 값 전달 기능 구현 방법

Vue는 인기 있는 JavaScript 프레임워크입니다. 구성 요소 개발은 복잡한 애플리케이션을 개발할 때 모듈화 수준을 향상하고 코드의 유지 관리성과 확장성을 향상시키는 데 도움이 될 수 있습니다. Vue에서 구성 요소 간의 데이터 전송은 매우 일반적인 요구 사항이며 가장 일반적인 시나리오는 상위 구성 요소와 하위 구성 요소 간의 데이터 전송입니다. Vue에서 이러한 종류의 데이터 전송을 구현하려면 상위 구성 요소와 하위 구성 요소 간의 값 전송 구현 방법을 이해해야 합니다.

Vue 구성 요소에서 상위 구성 요소는 동시에 여러 하위 구성 요소를 가질 수 있습니다. 이러한 데이터는 상위 구성 요소의 데이터이거나 상위 구성 요소의 함수 반환 값일 수 있습니다. 하위 구성 요소를 호출하는 구성 요소입니다. 구체적으로 Vue에서 구성 요소 상위-하위 값 전송을 구현하는 방법은 다음과 같습니다.

1. Props 전송 데이터
   Vue에서는 하위 구성 요소에 props 속성을 선언한 다음 이를 속성 형식으로 전달할 수 있습니다. 상위 구성 요소 데이터를 하위 구성 요소로 변환합니다. 하위 구성 요소는 props 속성에 선언된 속성을 사용하여 이 데이터를 받을 수 있습니다.

샘플 코드:

상위 구성 요소:

<template>
  <div>
    <child-component :msg="helloWorld"></child-component>
  </div>
</template>

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

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

하위 구성 요소:

<template>
  <div>
    {{msg}}
  </div>
</template>

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

이 예에서는 하위 구성 요소에 props 속성을 선언합니다. 이름은 msg이고 유형은 String입니다. 상위 구성 요소에서 하위 구성 요소를 사용할 때 v-bind 지시문을 사용하여 상위 구성 요소의 helloWorld 속성을 하위 구성 요소의 msg 속성에 바인딩합니다.

2. 하위 구성 요소는 $emit 이벤트를 통해 상위 구성 요소에 데이터를 전달합니다.
   Vue에서는 이벤트를 트리거하여 상위 구성 요소에 데이터를 전달할 수 있습니다. 하위 구성 요소는 $emit 함수를 호출하여 사용자 정의 이벤트를 트리거할 수 있으며, 전달해야 하는 데이터는 이벤트 매개 변수로 상위 구성 요소에 전달될 수 있습니다.

샘플 코드:

상위 구성 요소:

<template>
  <div>
    <child-component @message-sent="showMessage"></child-component>
  </div>
</template>

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

  export default {
    methods: {
      showMessage(msg) {
        console.log(msg)
      }
    },
    components: {
      ChildComponent
    }
  }
</script>

하위 구성 요소:

<template>
  <div>
    <button @click="sendMessage">Click Me</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendMessage() {
        this.$emit('message-sent', 'Hello World!')
      }
    }
  }
</script>

이 예에서는 하위 구성 요소에 버튼을 추가합니다. 버튼을 클릭하면 하위 구성 요소가 sendMessage 함수를 호출하고 Create를 트리거합니다. message-sent라는 이름의 사용자 정의 이벤트를 생성하고 'Hello World!' 매개변수를 상위 구성 요소에 전달합니다.

3. ref 속성을 통해 하위 구성 요소 인스턴스 가져오기
   Vue에서는 ref 속성을 추가하여 하위 구성 요소의 인스턴스를 가져온 다음 이 인스턴스의 메서드와 속성을 직접 호출할 수 있습니다.

샘플 코드:

상위 구성 요소:

<template>
  <div>
    <button @click="showMessage">Click Me</button>
    <child-component ref="child"></child-component>
  </div>
</template>

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

  export default {
    methods: {
      showMessage() {
        console.log(this.$refs.child.message)
      }
    },
    components: {
      ChildComponent
    }
  }
</script>

하위 구성 요소:

<template>
  <div>
    {{message}}
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello World!'
      }
    }
  }
</script>

이 예에서는 하위 구성 요소에 데이터 속성 메시지를 정의하고 상위 구성 요소의 ref 속성을 통해 하위 구성 요소를 가져옵니다. 버튼을 클릭하면 상위 컴포넌트는 this.$refs.child를 통해 하위 컴포넌트의 인스턴스를 얻은 후 해당 메시지 속성에 직접 접근합니다.

요약:
위는 Vue에서 구성 요소 상위-하위 값 전송을 구현하는 몇 가지 일반적인 방법입니다. 그 중 Props는 가장 일반적으로 사용되는 데이터 전송 방식으로, 컴포넌트 간의 데이터 전송 유형을 명확하게 할 수 있고, 가독성과 유지 관리성이 우수하며, $emit 이벤트를 통해 상위 컴포넌트로 데이터를 전송하는 방식도 적용 가능합니다. 하위 구성 요소 내에서 작업이나 데이터를 수행해야 하지만 props를 통해 수행할 수 없는 시나리오에 적합합니다. ref 속성을 통해 하위 구성 요소 인스턴스를 얻는 방법은 상위 구성 요소가 하위 구성 요소 데이터를 직접 조작해야 하는 상황에 적합합니다. 기능.

위 내용은 Vue 문서에서 컴포넌트 상위-하위 값 전달 기능 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!