하위 구성 요소에 대한 v-model 및 하위 구성 요소 Vue 내부의 v-model

하위 구성 요소에 대한 v-model 및 하위 구성 요소 Vue 내부의 v-model

이 코드를 간소화하는 방법이 있습니까?

버튼을 누르면 아이의 localValue도 변경됩니다.

Vue.component('my-input', {
  template: `
    <div>
      <b>My Input:</b> <br>
      localValue: {{ localValue }} <br>
      <input v-model="localValue">
    </div>
  `,
  props: ['value'],
  data() {
    return { localValue: this.value }
  },
  watch: {
    value () {
      this.localValue = this.value
    },
    localValue () {
      this.$emit('input', this.localValue)
    }
  }
})

new Vue({
  el: '#app',
  data: () => ({
    parentValue: 'Inital value'
  }),
  methods: {
    change () {
      this.parentValue = 'Changed value'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <my-input v-model="parentValue"></my-input>

  <button @click="change">Change</button><br>

  parentValue: {{ parentValue }}
</div>

나는 필요할 때 항상 어려움에 직면해왔다.

도와주시면 정말 감사하겠습니다!

사용을 회피하는 경우v-model커스텀 폼 컴포넌트 내에서 필요한 것은

<b>My Input:</b> <br>
localValue: {{ value }} <br>
<input :value="value" @input="$emit('input', $event.target.value)">

아니요.data,아니요.watch,바로 그겁니다.

https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components 를 참조해 주세요.

---

컴포넌트의 로컬 값을 나타내는 것이 필요한 경우 Vue docs에서는 watchers보다 계산된 값을 사용하는 것이 좋습니다(참조:https://vuejs.org/v2/guide/computed.html#Watchers)).

여기서는 getter와 setter를 사용하여 계산된 값을 생성하여 단순화된 단방향 데이터 흐름을 촉진합니다.

Vue.component('my-input', {
  template: `<div><b>My Input:</b> <br>localValue: {{ localValue }} <br><input v-model="localValue"></div>`,
  props: ['value'],
  computed: {
    localValue: {
      get () {
        return this.value
      },
      set (value) {
        this.$emit('input', value)
      }
    }
  }
})

new Vue({
  el: '#app',
  data: () => ({
    parentValue: 'Inital value'
  }),
  methods: {
    change () {
      this.parentValue = 'Changed value'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <my-input v-model="parentValue"></my-input>

  <button @click="change">Change</button><br>

  parentValue: {{ parentValue }}
</div>

언급URL : https://stackoverflow.com/questions/52249365/v-model-for-child-component-and-v-model-inside-child-component-vue