Блог

Идея состоит в том, чтобы связать родительский и дочерний компоненты, аналогичные приведенному здесь примеру, с использованием синхронизации, но с использованием объекта, содержащего поля формы.

(В настоящее время я использую наблюдатель для дочернего компонента, обнаруживающий изменения реквизита в данных родительской формы для этого, что работает нормально, но решение для синхронизации было бы более элегантным, я думаю)

Пример с одним полем:

Родительский

 <template>
  <div id="app">
    <h3>Parent Component</h3>
    <ChildComponent :inputData.sync="parentData" />
  </div>
</template>

<script>
import ChildComponent from "./components/ChildComponent.vue";

export default {
  name: "App",
  data: function() {
    return {
      parentData: "my input"
    };
  },
  components: {
    SChildComponent
  }
};
</script>
 

Дочерний компонент:

 <template>
  <div class="child-component">
    <input
      type="text"
      v-model="inputData"
      @keyup="$emit('update:inputData', inputData);"
    />
  </div>
</template>
<script>
export default {
  name: "ChildComponent",
  props: {
    inputData: String
  }
};
</script>
 

Резюмирую: я ищу версию формы, отправляющую все поля

не уверен, решать вашу проблему или нет, вот мой опыт:

1. используйте ref и $ref , вы можете установить ref тег для вашего дочернего компонента родительского компонента, например, в этом примере :

 <div id="app">
    <!-- ref attribute -->
    <child-component ref="child1"></child-component>
    <child-component ref="child2"></child-component>
    <button @click="show">alert child-component count</button>
</div>


// Child component
Vue.component('child-component', {
    data: function () {
        return {
            count: 20
        };
    },
    methods: {
        getOne: function () {
            this.count  ;
        }
    },
    template: '<button @click="getOne">{{ count }}</button>'
});

// Parent Component
const vm = new Vue({
    el: '#app',
    data: {},
    methods: {
        show: function () {

            // get "count" of child component by $refs 
            console.log(this.$refs.child1.count);
            console.log(this.$refs.child2.count);
        }
    }
});
 

Он не только может получить определенный параметр или переменную дочернего компонента, но также может получить весь дочерний компонент.
Я надеюсь, что приведенное выше решение может вам помочь 🙂