Question

我有以下设置：

CustomForm.vue

<template>
 <div>
   <input v-model="field1" >
   <input v-model="field2" >
 </div>
</template>
<script>
export default {
 data () {
  return {
   field1: '',
   field2: '',
  }
 }
}
</script>

Parent.vue

<template>
 <div>
  <child>
   <template>
    <custom-form />
   </template>
  </child>
 </div>
</template>

<script>
import Child from ...
import CustomForm from ...

</script>

Child.vue

<template>
 <div>
  <button @click="click" />
  <grand-child>
   <template>
    <slot></slot>
   </template>
  </grand-child>
 </div>
</template>
<script>
import GrandChild from...
export default {
  methods: {
   click: function () {
    var data = ... // get form data
    // do something with data then $emit
    this.$emit('custom-click', data)
   }
  }
 }
}
</script>

GrandChild.vue

<template>
 <div v-for="(item, index) in list" :key="index" >
   <input ...>
   <input ...>
   <slot></slot>
 </div>
</template>

基本上我有一个CustomForm，我想将表单从Parent.vue传递给GrandChild.vue，但是问题是我不知道如何在Child.vue中检索CustomForm数据（field1，field2），即从Child.vue中的click方法中获取CustomForm值？谢谢

Answer 1

还有其他方法，而不是尝试从插槽中提取数据。一种解决方案是使用Vue的provide/inject功能注入表单数据。

首先，设置CustomForm以允许v-model捕获Parent中的表单数据：

在CustomForm中提交表单后，发出带有表单数据的input事件。
根据“ v-model”的要求添加一个value道具。

CustomForm.vue：

<template>
  <form @submit.prevent="submit"> <!-- (1) -->
  </form>
</template>

<script>
export default {
  props: ['value'], // <-- (2)
  methods: {
    submit(e) { // <-- (1)
      const form = e.target
      const formData = {}
      for (const [key, value] of new FormData(form).entries()) {
        formData[key] = value
      }
      this.$emit('input', formData)
    }
  }
}
</script>

然后Parent可以绑定表单数据：

在parentForm的数据中将Parent定义为具有子属性的对象（例如parentForm.data）。
将该子属性绑定到CustomForm的{{1}}。

Parent.vue：

v-model

现在，<template> <child> <custom-form v-model="parentForm.data" />  </child> </template> <script> export default { data() { return { parentForm: { // <-- (3) data: {} } }; } } </script>可以提供Parent：

声明一个form方法，该方法返回具有provide子属性的对象。
将该属性的值设置为先前在（3）中声明的form属性。

Parent.vue：

parentForm

...并且export default { provide() { // <-- (5) return { form: this.parentForm // <-- (6) } } }或Child可以注入GrandChild：

声明一个form属性，其值是一个包含inject（（5）中的子属性名称）的字符串数组。

GrandChild.vue：

form

demo

访问插槽组件数据？

1 个答案: