Vue 상위 구성요소와 하위 구성요소 간에 값을 전달하는 방법

이 기사는 Vue 상위 구성요소와 하위 구성요소 간에 값을 전송하는 방법을 공유합니다. 내용이 매우 좋습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Background: 최근 vue 프로젝트를 진행하고 있는데 페이지의 로직이 상대적으로 복잡하고 코드의 양이 많아서 일부 컴포넌트를 추출해서 컴포넌트에 넣고 싶습니다. 그러면 문제가 발생합니다.
Vue에서는 자식 컴포넌트에서 부모 컴포넌트의 값을 수정하는 것을 옹호하지 않기 때문에 이런 작업을 하려고 하면 번거로운 단계가 될 것입니다. 그리고 딱 그런 작업이 필요해서 정보를 확인했습니다 #🎜🎜 # 먼저 상위 구성 요소로 이동합니다. 코드는 exp-group 하위 구성 요소를 참조합니다

<exp-group :grpVisible="grpVisible" :grpData="grpData" @updateData="acceptData"></exp-group>

grpVisible 및 grpData는 하위 구성 요소에 전달되는 속성이며, 하나는 공통 유형이고 다른 하나는 객체입니다#🎜🎜 #

grpVisible: false,
grpData: {app: this.$route.query.app, exp: this.$route.query.exp},

다음 I 하위 구성 요소에서 이 두 속성의 값을 변경하여 상위 구성 요소에 전달하려면 먼저 하위 구성 요소에서 이를 정의해야 합니다.

props: {
  grpVisible: {
    type: Boolean,
    default: false
  },
  grpData: {
    type: Object
  }
},

First of 모두, 일반 유형의 grpVisible 속성을 수정하려면 grpVisible을 변경하는 변수를 정의해야 합니다. 이 변수에 값을 복사한 다음 이 변수를 수정하고 상위 구성 요소에 전달합니다. 자세한 내용은 # 코드를 참조하세요. 🎜🎜#

let demo1 = this.grpVisible
demo1 = true
this.$emit('updateData', demo1) //子组件

부모 구성 요소는 acceptData의 매개 변수 값을 통해 이 값을 받습니다.

acceptData (value) {
  console.log(value)
}, //父组件

객체의 경우 Object.sign을 사용하여 변수에 새 할당을 복사해야 합니다. 그런 다음 변수를 수정하고 이를 상위 구성 요소에 전달합니다. 코드는 다음과 같습니다.

let demo1 = Object.assign({}, this.grpData)
demo1.app = 'binge'
this.$emit('updateData', demo1)

관련 권장 사항:

#🎜 🎜#

Vue 사용 방법 동적으로 데이터를 추가하는 트리 제어 z-tree

JavaScript는 어떻게 DOM을 사용하여 이미지 전환을 달성하나요?

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