vue父组件获取子组件多个input框的值

vue父组件获取子组件多个input框的值

有时候我们会把表单的输入框放到组件中去，如果只有一个输入框还好。
例如：
从子组件中获取一个input的值
子组件

<template>
	<div>
	<input type="text" class="form-control" id="inputEmail3" placeholder="test" v-on:input="input_name($event.target.value)">
	</div>
</template>
<script>
export default {
    props:['count'],
    methods:{
        input_name(e) {
            this.$emit("input", e);
        }
    }
}
</script>

父组件

 <test-type  v-model="result"></test-type>
  <button type="button" class="btn btn-primary" @click="test">提交</button>
<script>
import testType from '@/components/TestType.vue'
export default {
    components:{testType},
    data:function(){
        return{
            result:""
        }
    },
    methods:{
        test:function(){
            console.log(this.result)
        }
    }
}
</script>

这样就可以得到子组件中输入框中的值了
但是有些时候我们可能会在组件中传多个值，因此可以通过以下方式：
子组件

	<template>
    <div class="form-group">
            <div class="col-sm-6">
                <label for="inputEmail3" class="col-sm-2 control-label" >题型{{count}}</label>
                <input type="text" class="form-control" id="inputEmail3" placeholder="题型名称" v-on:input="input_name($event.target.value)">
            </div>
            <div class="col-sm-3">
                <label for="inputEmail3" class="col-sm-6 control-label">题目数</label>
                <input type="text" class="form-control" id="inputEmail3" placeholder="题目数" v-on:input="input_count($event.target.value)">
            </div>
            <div class="col-sm-3">
                <label for="inputEmail3" class="col-sm-6 control-label">总分数</label>
                <input type="text" class="form-control" id="inputEmail3" placeholder="总分" v-on:input="input_number($event.target.value)">
            </div>
    </div>
</template>
<script>
export default {
    props:['count'],
    data:function(){
       return{
           reslut:{}
       }
    },
    methods:{
        input_name(e) {
            this.reslut.name = e;
        },
        input_count(e) {
           this.reslut.count = e;
        },
        input_number(e) {
          this.reslut.number = e;
          console.log(this.reslut);
         this.$emit("input", this.reslut);
        }
    }
}
</script>

父组件

 <form class="form-horizontal" ref="result">
            <test-type  v-model="result"></test-type>
   </form>
   <button type="button" class="btn btn-primary" @click="test">提交</button>
<script>
import testType from '@/components/TestType.vue'
export default {
    components:{testType},
    data:function(){
        return{
            result:{}
        }
    },
    methods:{
        test:function(){
            console.log(this.result)
        }
    }
}
</script>

如果再恰好你需要一个循环的多输入框，则可以使用以下方式：
子组件

	<template>
    <div class="form-group">
            <div class="col-sm-6">
                <label for="inputEmail3" class="col-sm-2 control-label" >题型{{count}}</label>
                <input type="text" class="form-control" id="inputEmail3" placeholder="题型名称" v-on:input="input_name($event.target.value)">
            </div>
            <div class="col-sm-3">
                <label for="inputEmail3" class="col-sm-6 control-label">题目数</label>
                <input type="text" class="form-control" id="inputEmail3" placeholder="题目数" v-on:input="input_count($event.target.value)">
            </div>
            <div class="col-sm-3">
                <label for="inputEmail3" class="col-sm-6 control-label">总分数</label>
                <input type="text" class="form-control" id="inputEmail3" placeholder="总分" v-on:input="input_number($event.target.value)">
            </div>
    </div>
</template>
<script>
export default {
    props:['count'],
    data:function(){
       return{
           reslut:{}
       }
    },
    methods:{
        input_name(e) {
            this.reslut.name = e;
        },
        input_count(e) {
           this.reslut.count = e;
        },
        input_number(e) {
          this.reslut.number = e;
          console.log(this.reslut);
         this.$emit("input", this.reslut);
        }
    }
}
</script>

父组件

<form class="form-horizontal" ref="result">
    <test-type v-for="(item,index) in Number(count)" :key="index" :count="index+1" v-model="result[index]"></test-type>
 </form>
   <button type="button" class="btn btn-primary" @click="test">提交</button>
<script>
import testType from '@/components/TestType.vue'
export default {
    components:{testType},
    data:function(){
        return{
            result:[]
        }
    },
    methods:{
        test:function(){
            console.log(this.result)
        }
    }
}
</script>