访问插槽组件数据？

Posted 2023-02-16

【中文标题】访问插槽组件数据？

【英文标题】：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 值？谢谢

【参考方案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