vue 封装组件可动态添加表单
时间: 2023-10-01 19:09:28 浏览: 42
Vue 封装组件可动态添加表单,可以使用`v-model`和`props`来实现。以下是一个简单的例子:
```vue
<template>
<div>
<div v-for="(input, index) in inputs" :key="index">
<label>{{ input.label }}</label>
<input v-model="input.value" :type="input.type">
</div>
<button @click="addInput">Add Input</button>
</div>
</template>
<script>
export default {
props: {
initialInputs: {
type: Array,
default: () => []
}
},
data() {
return {
inputs: this.initialInputs
};
},
methods: {
addInput() {
this.inputs.push({ label: "New Input", value: "", type: "text" });
}
}
};
</script>
```
在这个组件中,我们使用`v-for`指令来渲染输入框,`v-model`指令来绑定输入框的值。我们还提供了一个`addInput`方法,用于在点击“Add Input”按钮后添加一个新的输入框。通过将初始输入数组传递到组件的`initialInputs`属性中,我们可以在组件实例化时渲染任意数量的输入框。