1.子组件-单个输入框
<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>
1-1 父组件获取子组件值
<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>
2.子组件-多个输入框
<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>
2-1 父组件获取子组件的值
<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>