vue 하위 구성 요소에서 상위 구성 요소로 값을 전달하는 방법

vue 하위 구성 요소가 상위 구성 요소에 값을 전달하는 방법: 1. 하위 구성 요소는 이벤트를 적극적으로 트리거하여 상위 구성 요소에 데이터를 전달합니다. 2. 하위 컴포넌트에 ref를 바인딩하고 상위 컴포넌트가 직접 호출할 수 있는 함수를 정의합니다. 상위 컴포넌트는 하위 컴포넌트를 등록한 후 ref를 바인딩하고 하위 컴포넌트의 함수를 호출하여 데이터를 얻습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

먼저, 하위 구성 요소는 이벤트를 적극적으로 트리거하고 데이터를 상위 구성 요소에 전달합니다.

1. 하위 구성 요소의 이벤트와 이벤트에 의해 트리거되는 함수를 바인딩합니다.

하위 구성 요소 코드

<template>
<div>
<Tree :data="treeData" show-checkbox ref="treeData"></Tree>

<Button type="success" @click="submit"></Button>
</div>
  
</template>

이벤트는 하위 구성 요소 함수

      submit(){
        this.$emit('getTreeData',this.$refs.treeData.getCheckedNodes());
      },

2에서 트리거되고, 상위 구성 요소

<AuthTree  @getTreeData=&#39;testData&#39;>
</AuthTree>

에서 트리거 이벤트를 바인딩합니다. 상위 구성 요소 트리거 함수는 하위 구성 요소에 의해 전달된 데이터를 표시합니다

testData(data){
      console.log("parent");
      console.log(data)
    },

콘솔에서 인쇄된 데이터

둘째, 하위 구성 요소 이벤트(예: 버튼 클릭, create() 이벤트 등)에서 이를 트리거할 필요가 없습니다.

이 방법이 훨씬 간단합니다.

1 Bind ref

<template>
<div>
<Tree :data="treeData" show-checkbox ref="treeData"></Tree>
</div>
  
</template>

하위 구성 요소에서 함수를 정의한 다음 이 함수는 상위 구성 요소를 직접 호출할 수 있습니다. 함수의 반환 값은 필요한 데이터로 정의됩니다.

getData(){
        return this.$refs.treeData.getCheckedNodes()
    },

그런 다음 하위 구성 요소를 상위 구성 요소에 등록하고 참조를 바인딩한 다음 하위 구성 요소의 함수를 호출하여 데이터를 가져옵니다

<AuthTree ref="authTree">
          </AuthTree>

상위 구성 요소 함수 호출

console.log( this.$refs.authTree.getData());

관련 권장 사항: "vue.js tutorial "

위 내용은 vue 하위 구성 요소에서 상위 구성 요소로 값을 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!