중첩된 사용자 지정 입력 구성요소로 데이터를 보내는 올바른 방법

중첩된 사용자 지정 입력 구성요소로 데이터를 보내는 올바른 방법

React에서 Vue로 이행하는 중인데, 저는 그냥 Vue가 마음에 들었어요.v-modelVue가 제공하는 것.지금 저는 어떤 상황에 처해있어서 이 일을 하는 vue-ish적인 방법을 찾을 수 없습니다.

컴포넌트리는 다음과 같습니다.

- FormContainer
  -FormView
    - CustomInput
      - input

내 주(州)가 있다.FormContainer이름, 나이라고 부르자.커스텀 세터 메서드를 쓰는 것을 피하고 싶다.v-model입력 컴포넌트에 데이터를 전달하려면 어떻게 해야 합니까?

현재 다음과 같은 작업을 하고 있습니다.

// in my container
<form-view :name="name" :age="age" />

// in my form view I am doing something like
<custom-input v-model="age"/>
<input v-model="name" />

둘 다 작동하지 않고 다음 오류가 발생합니다.Avoid mutating a prop directly

내가 할 수 있는 건

<form-view @age="age" :age="age" @name="name" :name="name"/>

뭐 비슷한 거.더 자세한 정보가 필요하시면 알려주세요.

저는 이미 두 번이나 이 질문에 답했고, 저의 답변은 장점이 있었지만, 저는 당신의 질문에 대해 그다지 적절한 답변이 아니라고 생각하여 삭제했습니다.

기본적으로 이벤트가 발생하는 요소에서 데이터 항목을 소유하는 Vue까지 이벤트가 "버블업"되도록 해야 합니다.Vue 이벤트는 버블하지 않지만 네이티브 이벤트는 버블하기 때문에 네이티브가 있는 경우input계층 하단에서 생성되는 이벤트는 트리의 위쪽에 있는 모든 구성요소에서 이벤트를 포착할 수 있습니다.

당신이 제시한 예에서, 만약name그리고.age데이터 항목은 최상위 Vue에 존재하며, 가장 바깥쪽 구성요소는 데이터 항목을 수식자와 함께 소품으로 사용할 수 있습니다.즉, 어떤 것이든update:name그리고.update:age컴포넌트로부터의 이벤트는 데이터 항목을 갱신합니다.아직까지는 좋아.

내부 이동form-view컴포넌트, 네이티브 입력 요소가 있습니다.보통, 네이티브를 방출합니다.input이벤트입니다.우리는 그것들이 버블이 되어주길 바란다.update:name이벤트이기 때문에, 다음과 같이 처리합니다.

 <input :value="name" @input="$emit('update:name', $event.target.value)">

여기 재미있는 부분이 있습니다.form-view컴포넌트에는custom-input요소.그 심장 어딘가에서(그리고 그것이 어디까지 내려갈지는 상관없습니다), 네이티브 입력 이벤트를 생성합니다.그것을 각 단계에서 잡아서 거품을 내는 것이 아니라 자연스럽게 거품이 일게 하고 그 뿌리에서 잡을 수 있다.custom-input필요한 컴포넌트를 방출합니다.update:age이벤트:

<custom-input :value="age" @input.native="$emit('update:age', $event.target.value)">

모든 것을 종합하면 컴포넌트를 통해 전달되는 두 가지 변수가 있습니다.input요소, 2input이벤트 핸들러 및 계산되지 않습니다.

new Vue({
  el: '#app',
  data: {
    name: 'Jerry',
    age: 21
  },
  components: {
    formView: {
      props: ['age', 'name'],
      components: {
        customInput: {
          props: ['value']
        }
      }
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <div>Name: {{name}}</div>
  <div>Age: {{age}}</div>
  <form-view :name.sync="name" :age.sync="age" inline-template>
    <div>
      <custom-input :value="age" @input.native="$emit('update:age', $event.target.value)" inline-template>
        <div>
          Age: <input :value="value">
        </div>
      </custom-input>
      <div>Name: <input :value="name" @input="$emit('update:name', $event.target.value)"></div>
    </div>
  </form-view>
</div>

언급URL : https://stackoverflow.com/questions/45765779/right-way-to-send-data-to-nested-custom-input-component