在 Vuejs 的插槽内设置 v-model 值

Question

我有两个组件

child-component.vue

<template>
    <div class="container">
        <slot>
    </div>
</template>

父组件.vue

<template>
    <my-component>
        <input type="text" v-model="myinput1">
        <input type="text" v-model="myinput2">
        <input type="text" v-model="myinput3">
    </my-component>
</template>

<script>
    export default {
        data() {
            return {
                myinput1: '',
                myinput2: '',
                myinput3: '',
            }
        }   
     }
</script>

我需要直接从子组件设置槽内每个输入字段的值（输入字段的数量可能会改变）。

有没有办法在不触发子组件事件的情况下实现它？

谢谢

Answer 1

编辑 - 修改代码以处理可变数量的输入

在子组件中

<template>
    <div class="container">
        <slot :data="slotData" />
    </div>
</template>

<script>
  export default
  {
    data()
    {
      return {
        slotData: ['1', '2', '3']
      };
    }
  }
</script>

在父组件中

<template>
    <my-component>
      <template slot-scope="props">
        <input v-for="item in props.data" type="text" v-model="item">
      </template>
    </my-component>
</template>