Question

我是Vue的新手，我正在尝试在我的项目中创建动态<form>。

此时，我想对<slot>中<form>分配的输入使用v-model。问题是，模型没有实例化，我想在<form>上将其作为参数发送。

检查一些我想要的代码，也许这很容易理解：

foo.blade.php：

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

CustomForm.vue：

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

错误表示无法从null读取名称。（模型未实例化）

Answer 1

要使用其插槽中组件的数据，您需要使用scoped slot。

console.clear()

Vue.component("custom-form", {
  props: ["model", "url"],
  template: `
    <form :action="url">
      <slot :model="model"/>
    </form>
  `
})

new Vue({
  el: "#app",
  data: {
    model: {
      name: null,
      email: null,
      body: null,
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <custom-form :model="model" url="url/foo">
    <template slot-scope="props">
      <div class="form-group">
        <input id="name" name="name" v-model="props.model.name">
      </div>
    </template>
  </custom-form>
  <hr> {{model}}
</div>

Answer 2

为此您需要使用scoped-slot。请参阅：https://vuejs.org/v2/guide/components.html#Scoped-Slots

这个想法是在子组件中你会声明像：

这样的东西

<slot :model="model">...</slot>

在父母身上：

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

Vue 2 - 使用抽象的v-model属性创建表单

2 个答案: