vue父组件获取子组件多个input框的值 |
您所在的位置：网站首页 › 获取input的value值 › vue父组件获取子组件多个input框的值 |
|
vue父组件获取子组件多个input框的值
有时候我们会把表单的输入框放到组件中去，如果只有一个输入框还好。 例如： 从子组件中获取一个input的值 子组件 export default { props:['count'], methods:{ input_name(e) { this.$emit("input", e); } } }父组件 提交 import testType from '@/components/TestType.vue' export default { components:{testType}, data:function(){ return{ result:"" } }, methods:{ test:function(){ console.log(this.result) } } }这样就可以得到子组件中输入框中的值了 但是有些时候我们可能会在组件中传多个值，因此可以通过以下方式： 子组件 题型{{count}} 题目数 总分数 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); } } }父组件 提交 import testType from '@/components/TestType.vue' export default { components:{testType}, data:function(){ return{ result:{} } }, methods:{ test:function(){ console.log(this.result) } } }如果再恰好你需要一个循环的多输入框，则可以使用以下方式： 子组件 题型{{count}} 题目数 总分数 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); } } }父组件 提交 import testType from '@/components/TestType.vue' export default { components:{testType}, data:function(){ return{ result:[] } }, methods:{ test:function(){ console.log(this.result) } } } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |