vue中，input被封装成组件循环使用，如何与父组件传值

最新推荐文章于 2025-07-28 15:14:36 发布

原创最新推荐文章于 2025-07-28 15:14:36 发布 · 1.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

VUE

当前文章被收录于：

VUE

70 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了在Vue中如何处理一个被封装成组件并循环使用的input元素，详细阐述了如何通过v-model在子组件和父组件之间传递值。子组件需在外层包裹div，并使用props接收父组件传递的数组。父组件则可以监听子组件的变化，实现双向数据绑定。

代码

input子组件html:
注意：子组件 template 中不可以直接循环需要在外层加个div包起来。。

<div class="bj-box">
	<div class="bj-item clearfix"
	     v-for="(item, index) in inputList"
	     :key="index">
	  <label>{{item.label}}</label>
	  <div class="item-r">
	    <div :class="['inp-div', item.class]">
	      <el-input type="text"
	                :placeholder="item.placeholder"
	                v-model="item.model"
	                :maxlength="item.maxlength"
	                show-word-limit>
	      </el-input>
	    </div>
	  </div>
	</div>
</div>

v-model使用自己的item.model，props接收父组件传来的数组：
js:

props: {
    inputList: {
      type: Array,
      default () {
        return []
      }
    },
  }

父组件html:

<m-input :inputList="inputList" />

js:

inputList: [{
        class: 'telephone',
        label: '手机号码:',
        placeholder: '请输入您的手机号码',
        maxlength: '11',
      }, {
        class: 'weixin',
        label: '微信公众号:',
        placeholder: '请输入您的公众号（选填）',
        maxlength: '20',
      }]