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

最新推荐文章于 2023-02-02 16:57:22 发布

幽幽靖

最新推荐文章于 2023-02-02 16:57:22 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/ws19900201/article/details/98733914

VUE 专栏收录该内容

70 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

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',
      }]