一:父组件内容;

1.为方便理解，这里将部分内容摘除

                                            
<template>
  <atom-form :params="atomArr_Qresult" @atomform="getchuanzhi"></atom-form>
</template>
export default {
 data () {
   return {
     atomArr_Qresult:{
       fields:[
         {name:'xiaobai1',title:'小白1',type:'text'},
         {name:'xiaobai2',title:'小白2',type:'date'}]
      }
   }
 }
 methods:{
   getchuanzhi:function(value){
   console.log("value....表单值",value);
   }                        
 }
}
                                            
                                        

2. 在子组件标签内有两个属性；params是在子组件props中定义的键名;用来父组件给子组件传值；后面的on事件也是子组件emit的事件名；用来父组件获取子组件的value值；拿到值以后就任意使用了

二:子组件内容，这里是定义一个表单子组件

1. 先上全部代码

                                            
<template>
<span>
    <div v-for="item in params.fields" :key="item.name">
        <template v-if="item.type=='text'" >
            <Form-item :label=item.title>
                <Col span="15">
                    <Input type="text" v-model="formdata[item.name]" placeholder="请输入"></Input>
                </Col>
            </Form-item>
        </template>
         <template v-if="item.type=='date'" >
            <Form-item :label=item.title>
                <Col span="15">
                    <DatePicker type="date" placeholder="Select date" v-model="formdata[item.name]"></DatePicker>
                </Col>
            </Form-item>
        </template>
    </div>
</span>
</template>
<script>
export default {
    data(){
        return {  
            formdata:{}
        }
    },
    props:{
        params:Object    // 定义键的类型为一个对象
    },
    computed:{
        getformdata:function(){
            return this.formdata    // 作用:实时监控formdata对象值的变化
        }
    },
    methods:{},
    created:function(){
        this.$emit('atomform',this.getformdata)     
    }
}
</script>
                                            
                                        

2. 至于上面的formdata[item.name]，就是获取每一项的name值；然后应用了Javascript对象可以动态赋值的特性；这也是刚开始可以给他定义一个空对象formdata即可；后面根据父组件传过来的内容动态定义属性

3.子组件通过this.$emit给父组件传值，将this.getformdata传给父组件，通过上面的value就可以得到；在这里为什么用到了计算属性computed和钩子函数呢，下面简单叙述

三:如何将表单值动态传给父组件

1.子组件给父组件传值容易；但是实时传递的话需要一个钩子函数，使得页面加载就将计算属性绑定值emit事件；

2.计算属性其实也是一种属性，调用方式和data()里面的方法一模一样，不带括号;他的属性值是随着绑定的data里面的值实时变化的；所以每当表单值变化，它的值就变化；传给父组件的内容就变了 题外篇:大家可以了解一下vue的vuex状态管理；有两个特点 getter和computed是对应的，他们的值都是依赖于属性值改变的；特点是只有state或者属性值改变了，他们才会变； 可以用来处理复杂运算;因为缓存特性，如果state或者属性值没有改变；调用getter或者computed的时候，基于缓存机制，不需要再次执行计算，这就是和method方法的区别