다른 컴포넌트의 Vue 단일 컴포넌트에서 데이터를 가져오시겠습니까?

다른 컴포넌트의 Vue 단일 컴포넌트에서 데이터를 가져오시겠습니까?

나는사용하고 있다를 사용한다Vue.js 2.5.13그리고 이 구성이 있습니다.다음과 같은 구조를가지고 있습니다.

컴포넌트 1vue:

    <template>
      <div>
        <input type="text" v-model="input_one">
        <component-two></component-two>
      </div>
    </template>

    <script>
      import ComponentTwo from 'component-two.vue'

      export default {
        name: "component-one",
        components: {
          ComponentTwo
        },
        data() {
          return {
            input_one: 'Hello from ComponentOne',
            input_two: ... // <-- I want to get value from ComponentTwo input_two (v-model) here
          }
        }
      }
    </script>

컴포넌트 2vue:

    <template>
      <div>
        <input type="text" v-model="input_two">
      </div>
    </template>

    <script>
      export default {
        name: "component-two",
        data() {
          return {
            input_one: 'Hello from ComponentTwo'
          }
        }
      }
    </script>

어떻게데이터취득 방법에서 데이터를 얻기 위해.ComponentTwo구성 요소 구성 요소에서에ComponentOne왜냐하면(거대한 등록 사이트 형태)과 Vue-components. 간의 데이터라고 부르는 것에 대해 전혀 모르겠어 들판이 많은 유사한 요소들요?이 중요한 문제입니다.필드(대규모 등록 사이트 폼)를 가진 유사한 컴포넌트가 많고 뷰 컴포넌트 간의 데이터 호출에 대해 전혀 모르기 때문에 이 작업은 저에게 중요합니다.

Vuejs는 부모/자녀 커뮤니케이션에 "프로폰"을 사용하고 자녀/부모 커뮤니케이션에 "이미트" 이벤트를 사용합니다.

자 컴포넌트에 전달하는 모든 소품에 대해 소품 배열에 해당 소품을 추가해야 합니다.이벤트에도 마찬가지입니다.발신하는 모든 이벤트는 다음과 같이 부모 컴포넌트에서 검출됩니다.

컴포넌트 1vue:

    <template>
      <div>
        <input type="text" v-model="input_one">
        <component-two
            @CustomEventInputChanged="doSomenthing">
        </component-two>
      </div>
    </template>

    <script>
      import ComponentTwo from 'component-two.vue'

      export default {
        name: "component-one",
        components: {
          ComponentTwo
        },
        data() {
          return {
            input_one: 'Hello from ComponentOne',
            input_two: ''
          }
        },
        methods: {
            doSomenthing ( data ) {
                this.input_two = data;
            }
        }
      }
    </script>

컴포넌트 2vue:

    <template>
      <div>
        <input type="text" v-model="input_two" @change="emitEventChanged>
      </div>
    </template>

    <script>
      export default {
        name: "component-two",
        data() {
          return {
            input_one: 'Hello from ComponentTwo'
          }
        },
        methods: {
            emitEventChanged () {
                this.$emit('CustomEventInputChanged', this.input_two);
            }
        }

      }
    </script>

이거면 될 것 같아

글로벌 이벤트 버스를 사용하면 쉽게 이를 달성할 수 있습니다.

https://alligator.io/vuejs/global-event-bus/

규모가 크고 복잡한 애플리케이션의 경우 vuex 등의 상태 관리 도구를 사용하는 것이 좋습니다.

https://vuex.vuejs.org/en/

v-model을 다시 상위 모델로 전송하는 시스템을 구현해야 합니다.

이 이 작업은 안에 내부에서 계산된 속성을 사용하여 수행할 수 있습니단computed 속성을 사용하여 수행할 수 있다.component-two그것은 집합 방법 내부의 변화를 발생시킨다.설정된 방식 내에서변경을 방출합니다.

예:

Vue.component('component-two', {
  name: 'component-two',
  template: '#component-two-template',
  props: {
    value: {
      required: true,
      type: String,
    },
  },
  computed: {
    message: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
});

var app = new Vue({
  el: '#app',
  data: {
    message1: 'm1',
    message2: 'm2',
  },
});

<script src="https://unpkg.com/vue@2.0.1/dist/vue.js"></script>
<script type="text/x-template" id="component-two-template">
  <input type="text" v-model="message"/>
</script>
<div id="app">
  <input type="text" v-model="message1"/>
  <component-two v-model="message2"></component-two>
  <p>Output</p>
  <pre>{{message1}}</pre>
  <pre>{{message2}}</pre>
</div>

그것을 하는 데에는 여러 방법과 일부 다른 대답에 언급된다: 있다.여기에는몇가지 방법이 있으며, 다른 답변에서도 몇 가지 방법이 언급되어 있습니다.
(특별한 순서는 없습니다.자세한 내용은 아래 섹션을 참조해 주세요.)

1. 글로벌 이벤트 버스 사용
2. 컴포넌트에 소품 사용
3. v-model 특성 사용
4. 동기화 수식자 사용
5. Vuex 사용

쌍방향 바인딩의 경우 유지하기가 어려운 돌연변이의 연쇄가 발생할 수 있다는 점에 유의하십시오.

그러나 실제 양방향 바인딩은 하위 구성 요소가 상위 구성 요소와 하위 구성 요소 모두에서 이러한 변환의 원인이 명확하지 않은 상태에서 상위 구성 요소를 변환할 수 있기 때문에 유지 관리 문제가 발생할 수 있습니다.

사용 가능한 메서드에 대한 자세한 내용은 다음과 같습니다.

1) 글로벌 이벤트 버스 사용

본인은 이 접근방식을 컴포넌트 간의 공통 커뮤니케이션에 사용하지 말 것을 강력히 권장합니다.여기서와 같은 많은 장소에서 논의되고 있습니다.

2) 컴포넌트에 소품 사용

소도구들을 사용할 수 있는 이상적인 방법 가장 일반적인 문제를 해결하기 쉽다.소품은 사용하기 쉽고 대부분의 일반적인 문제를 해결하는 이상적인 방법입니다.
Vue가 변경 사항을 관찰하는 방식 때문에 개체에서 모든 속성을 사용할 수 있어야 합니다. 그렇지 않으면 해당 속성이 반응하지 않습니다.Vue가 속성을 관찰 가능한 '설정'으로 설정한 후 속성을 추가할 경우 사용해야 합니다.

 //Normal usage
 Vue.set(aVariable, 'aNewProp', 42);
 //This is how to use it in Nuxt
 this.$set(this.historyEntry, 'date', new Date());

오브젝트는 컴포넌트와 부모 모두에 대해 반응합니다.

오브젝트/어레이를 소품으로 전달하면 쌍방향 동기화가 자동으로 이루어집니다.자녀의 데이터를 변경하고 부모에서 데이터를 변경합니다.

간단한 값(스트링, 숫자)을 소품으로 전달할 경우 .sync 수식자를 명시적으로 사용해야 합니다.

--> https://stackoverflow.com/a/35723888/1087372 에서 인용한 바와 같이

3) v-model 속성 사용

v-model 특성은 상위와 하위 간에 쉽게 양방향 바인딩할 수 있는 구문 설탕입니다.동기 수식자가 바인딩을 위해 특정 프로펠러와 특정 이벤트만 사용하는 것과 같은 동작을 합니다.

이것은, 다음과 같습니다.

 <input v-model="searchText">

다음과 같습니다.

 <input
   v-bind:value="searchText"
   v-on:input="searchText = $event.target.value"
 >

여기서 소품은 값이어야 하며 이벤트를 입력해야 합니다.

4. sync 수식어를 사용한다.

동기화 수식자 역시 구문 설탕이며 v-model과 동일한 기능을 수행합니다. 다만 프로펠러와 이벤트 이름은 사용되는 모든 항목에 따라 설정됩니다.

부모에서는 다음과 같이 사용할 수 있습니다.

 <text-document v-bind:title.sync="doc.title"></text-document>

변경 내용을 부모에게 알리기 위한 이벤트를 자녀에서 내보낼 수 있습니다.

 this.$emit('update:title', newTitle)

5. Vuex 사용

Vuex는 모든 구성 요소에서 액세스할 수 있는 데이터스토어입니다.변경 내용을 구독할 수 있습니다.

Vuex 스토어를 사용하면 데이터 돌연변이의 흐름을 보다 쉽게 확인할 수 있으며 데이터 돌연변이는 명시적으로 정의됩니다.vue 개발자 도구를 사용하면 변경된 내용을 쉽게 디버깅하고 롤백할 수 있습니다.

이 접근방식은 좀 더 많은 보일러 플레이트가 필요하지만 프로젝트 전체에서 사용하면 변경 방법과 장소를 정의하는 훨씬 깔끔한 방법이 됩니다.

「시작 가이드」

.sync Modifier를 사용할 수 있습니다.

<template>
  <div>
    <input type="text" v-model="input_one">
    <component-two :secondValue.sync="input_two"></component-two>
  </div>
</template>

<script>
  import ComponentTwo from 'component-two.vue'

  export default {
    name: "component-one",
    components: {
      ComponentTwo
    },
    data() {
      return {
        input_one: 'Hello from ComponentOne',
        input_two: ''
      }
    }
  }
</script>

컴포넌트 2vue:

<template>
  <div>
    <input type="text" v-model="input_two">
  </div>
</template>

<script>
  export default {
    name: "component-two",
    data() {
      return {
        input_one: 'Hello from ComponentTwo',
        input_two: ''
      },
      watch: {
        input_two : function(val){
          this.$emit('update:secondValue', val)
        }
      }
    }
  }
</script>

언급URL : https://stackoverflow.com/questions/48500685/get-data-from-one-vue-single-component-in-another-component