Vue如何修改slot插槽传递的值

古人云：“温故而知新”，诚不欺我也。

遇到这种问题起始基本是将数据内容作为一级参数传递给了插槽作用域，比如需要传递的内容是：

const user = {
  "name": "小明",
  "age": 19
}
1
2
3
4

那么在编写插槽时可能这样写：

<slot name="form" v-bind="user"></slot>
1

在使用时这样用：

<template v-slot:form="user">
</template>
1
2

这样做是无法通过注入v-model修改插槽传递的内容的，其实只需要做一点点小改变，将所传递的内容放到一个对象内部：

<slot name="form" v-bind="{ user }"></slot>
1

同时在使用时解构插槽 Prop：

<template v-slot:form="{ user }">
</template>
1
2

那么使用el-form-item的v-model也能修改插槽传递的值了。

还有一种方法，Form input elements and v-model in VueJS slots一文中提出了使用:value与@input：

<template v-slot="{value, update}">
  <input :value="value" @input="update">
</template>
1
2
3

但我不太建议使用这种形式，因为对组件的调用者来说很不友好。文中的第二种方式倒是给了我灵感。