VueJ는 부모로부터 자녀 컴포넌트의 데이터에 액세스합니다.

VueJ는 부모로부터 자녀 컴포넌트의 데이터에 액세스합니다.

웹 팩에 vue-cli 발판을 사용하고 있습니다.

현재 My Vue 컴포넌트 구조 / 계층 구조는 다음과 같습니다.

• ②.
  • PDF ★★★★★
    • 배경
    • 다이내믹 템플릿이미지
    • 정적 템플릿 이미지
    • 마크다운

앱 레벨에서는 하위 컴포넌트의 모든 데이터를 서버로 전송할 수 있는 단일 JSON 개체로 집약할 수 있는 vuejs 컴포넌트 메서드를 원합니다.

자구성요소의데이터에접근할수있는방법이있나요?특히, 깊이가 여러 개입니까?

그렇지 않은 경우 하위 구성요소에 의해 수정될 때 새 값에 액세스할 수 있도록 비활성 데이터/매개변수를 전달하기 위한 모범 사례는 무엇입니까?컴포넌트간의 의존관계를 피하기 위해 현재 컴포넌트 속성을 사용하여 전달되는 것은 초기화 값뿐입니다.

갱신:

확실한 답변입니다.두 가지 답변을 모두 검토한 후 도움이 되는 리소스:

• Vuex 및 Vuex 사용 시기
• 소규모 애플리케이션용 Vuex 대체 솔루션

내 자식 구성 요소에는 변경된 데이터를 내보내는 버튼이 없습니다.입력이 5~10개 정도 되는 폼입니다.다른 컴포넌트에서 프로세스 버튼을 클릭하면 데이터가 전송되므로 변경 시 모든 속성을 내보낼 수 없습니다.

그래서 제가 한 일은

부모 컴포넌트에서 "ref"에서 자녀의 데이터에 액세스할 수 있습니다.

예

<markdown ref="markdowndetails"></markdown>
<app-button @submit="process"></app-button>

// js
methods:{
    process: function(){
        // items is defined object inside data()
        var markdowns = this.$refs.markdowndetails.items 
    }
}

주의: 어플리케이션 전체에서 이 작업을 수행할 경우 vuex로 이동하는 것이 좋습니다.

이런 구조에는 스토어 같은 게 있어서 좋아요.

VueJ는 Vuex라고 하는 솔루션을 제공합니다.Vuex를 사용할 준비가 되지 않은 경우 자체 단순 저장소를 만들 수 있습니다.

이걸로 해보자

MarkdownStore.js

export default {

 data: {
   items: []
 },

 // Methods that you need, for e.g fetching data from server etc.

 fetchData() {
   // fetch logic
 }

}

이제 이 Store 파일을 가져오면 어디에서나 이러한 데이터를 사용할 수 있습니다.

홈뷰표시하다

import MarkdownStore from '../stores/MarkdownStore'

export default {

 data() {
   sharedItems: MarkdownStore.data
 },

 created() {
   MarkdownStore.fetchData()
 }

}

Vuex를 사용하지 않을 경우 사용할 수 있는 기본 흐름입니다.

하위 구성요소에 의해 수정될 때 새 값에 액세스할 수 있도록 비활성 데이터/매개변수를 전달하기 위한 모범 사례는 무엇입니까?

소품의 흐름은 한쪽으로 치우쳐 있기 때문에 어린이가 직접 소품을 개조해서는 안 됩니다.

복잡한 애플리케이션의 경우 vuex가 해결책이지만 단순한 경우에는 vuex가 과잉입니다.@Belmin이 말한 것처럼 반응성 시스템 덕분에 일반 JavaScript 객체를 사용할 수도 있습니다.

또 다른 솔루션은 이벤트를 사용하는 것입니다.Vue는 이미 EventEmitter 인터페이스를 구현했습니다.자녀가 사용할 수 있습니다.this.$emit('eventName', data)부모와 소통할 수 있습니다.

부모는 다음과 같이 이벤트를 수신합니다.@update의 줄임말이다v-on:update)

<child :value="value" @update="onChildUpdate" />

이벤트 핸들러의 데이터를 갱신합니다.

methods: {
  onChildUpdate (newValue) {
    this.value = newValue
  }
}

다음은 Vue의 사용자 지정 이벤트의 간단한 예입니다.
http://codepen.io/CodinCat/pen/ZBELjm?editors=1010

이것은 부모-자녀 통신일 뿐입니다.컴포넌트가 형제와 통신할 필요가 있는 경우 글로벌이벤트 버스가 필요합니다Vue.js에서는 빈 Vue 인스턴스를 사용할 수 있습니다.

const bus = new Vue()

// In component A
bus.$on('somethingUpdated', data => { ... })

// In component B
bus.$emit('somethingUpdated', newData)

하위 구성요소를 참조하고 이렇게 사용할 수 있습니다.$refs.refComponentName.데이터

부모 컴포넌트

<template>
   <section>
      <childComponent ref="nameOfRef" />
   </section>
</template>

 methods: {
  save() {
   let Data = this.$refs.nameOfRef.$data;
 }
},

저 같은 경우에는 등록 양식을 컴포넌트로 분류했습니다.

위와 같이 $refs를 사용했습니다.부모님에게는 다음과 같은 것이 있습니다.

템플릿:

<Personal ref="personal" />

스크립트 - 부모 컴포넌트

export default {
  components: {
    Personal,
    Employment
  },
  data() {
    return {
        personal: null,
        education: null
    }
  },
  mounted: function(){
       this.personal = this.$refs.personal.model
       this.education = this.$refs.education.model
  }
}

이것은 데이터가 반응적이기 때문에 잘 작동합니다.

언급URL : https://stackoverflow.com/questions/40410332/vuejs-access-child-components-data-from-parent