Vue 2 - 如何绑定父组件和子组件 - 与 FORM 内容

Question

这个想法是绑定父组件和子组件，类似于此处显示的示例，使用同步，但使用包含表单字段的对象。

（我目前在子组件上使用监视程序来检测父表单数据中的 Prop 更改，这工作正常，但我猜同步解决方案会更优雅）

单字段示例：

家长

<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>

总结：我正在寻找提交所有字段的表单版本

Answer 1

不确定是否能解决您的问题，以下是我的经验：

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);
        }
    }
});

它不仅可以获取子组件的特定参数或变量，还可以获取整个子组件。 我希望上述解决方案可以帮助你:)