访问插槽组件数据？答案

【问题标题】：Access slot component data?访问插槽组件数据？
【发布时间】：2020-07-21 06:46:54
【问题描述】：

我有以下设置：

CustomForm.vue

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

父.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 值？谢谢

【问题讨论】：

标签： vue.js vuejs2

【解决方案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就可以绑定表单数据了：

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

Parent.vue:

<template>
  <child>
    <custom-form v-model="parentForm.data" /> <!-- (4) -->
  </child>
</template>

<script>
export default {
  data() {
    return {
      parentForm: { // <-- (3)
        data: {}
      }
    };
  }
}
</script>

现在Parent可以提供form：

声明一个provide 方法，该方法返回一个带有form 子属性的对象。
将该属性的值设置为之前在 (3) 中声明的 parentForm 属性。

Parent.vue:

export default {
  provide() { // <-- (5)
    return {
      form: this.parentForm  // <-- (6)
    }
  }
}

...和Child 或GrandChild 可以注入form:

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

GrandChild.vue：

export default {
  inject: ['form'] // <-- (7)
}

demo

【讨论】：