这个想法是绑定父组件和子组件，类似于这里显示的示例，使用sync，但使用包含表单字段的Object。
(我目前在子组件上使用了一个观察程序来检测父表单数据中的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>
摘要：我正在寻找一个表单版本提交所有字段
不确定是否要解决您的问题，以下是我的经验：
- 使用
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);
}
}
});
它不仅可以获取子组件的特定参数或变量，还可以获取整个子组件。我希望上面的解决方案能帮助你：(