Vue 2：创建带抽象v-model属性的表单遇实例化问题

嘿，我来帮你搞定这个踩坑问题！你遇到的报错本质是Vue的插槽作用域规则在搞事情——插槽里的代码是在父组件的作用域里编译的，所以你在slot里写的v-model="model.name"，其实是在找父组件里的model变量，但你父组件根本没定义它，自然就会报“无法读取null的name”了。

下面给你两种针对性的解决方案，按需选择：

方案一：用作用域插槽（最贴合你的需求） #

这种方法能让你把传入Form组件的model props，通过作用域插槽暴露给插槽内容使用，完美匹配你“将model作为参数传入form，插槽内使用该model”的诉求。

第一步：修改CustomForm.vue，定义作用域插槽 #

把普通插槽改成作用域插槽，将model作为插槽的prop暴露出去：

<template>
  <form :action="url" method="post">
    <!-- 把组件接收的model作为插槽prop，命名为formModel（名字可以自定义） -->
    <slot :formModel="model"></slot>
  </form>
</template>

<script>
export default {
  props: ['model', 'url']
}
</script>

第二步：修改父组件foo.blade.php，接收插槽prop #

根据你使用的Vue版本选择写法：

• Vue2.6+ 推荐写法（v-slot）：

<custom-form :model="{ name: null, email: null, body: null }" url="url/foo">
  <!-- 接收子组件传来的formModel，用它绑定v-model -->
  <template v-slot="{ formModel }">
    <div class="form-group">
      <input id="name" name="name" v-model="formModel.name">
    </div>
    <!-- 其他输入框同理，都用formModel.xxx -->
  </template>
</custom-form>

• Vue2.6之前版本写法（slot-scope）：

<custom-form :model="{ name: null, email: null, body: null }" url="url/foo">
  <div slot-scope="{ formModel }" class="form-group">
    <input id="name" name="name" v-model="formModel.name">
  </div>
</custom-form>

方案二：父组件自己定义model（简单直接） #

如果不需要子组件管理model，只是把它传给组件用，那可以直接在父组件的Vue实例里定义model变量，插槽里绑定这个父组件的变量，同时传给子组件：

第一步：父组件实例里定义data #

假设你的父组件Vue实例是这样的：

new Vue({
  el: '#app',
  data() {
    return {
      formModel: { name: null, email: null, body: null }
    }
  }
})

第二步：修改foo.blade.php #

<custom-form :model="formModel" url="url/foo">
  <div class="form-group">
    <input id="name" name="name" v-model="formModel.name">
  </div>
</custom-form>

这样插槽里的formModel是父组件的data变量，绑定v-model完全没问题，同时也把它传给了子组件的model props。

内容的提问来源于stack exchange，提问作者JoseSilva