Vue子组件如何获取slot传入的表单绑定？

Question

本来想设计一个组件，如图所示完整的图是组件，名叫QueryForm，其中三个按钮和分割线是组件内置的，各种input输入框是slot进来的。QueryForm的源码如图所示：现在我希望我能指定每个input所绑定的变量，并且再按下搜索按钮的时候，能够把各个变量组成的那个总的object对象返回到QueryForm父组件层来。

Answer 1

• 我记得vue官网例子有一个这样的说法：
  
  

也就是说，假如你的应用里面就只有这一个组件实例的话，那么你完全可以不用担心所有组件实例共享数据的问题。即

    var childData={        option1:'',        option2:'',        date:''
    }    var child=Vue.extend({        tempalte:'#demoTemplate',        data:childData,
    })    var father=new Vue({        el:'#fatherId',        data:{            childData:childData,
            ...
        },        components:{//局部注册
            ch:child
        }
    })

这样父子共同使用childData的数据

• 当然上面那个还是我猜的→_→||，毕竟我也没试过这样，你可以试试。接下来是标准的做法：
  利用props传值，把v-model="msg"的msg这部分定义在父组件上，即：

    /*子组件定义*/
    var childObj=Vue.extend({        template:'#demoTp',        props:['father']
    });

    <!--子组件在他爹里面的样子-->
    <div id="father">
        <!--:是v-bind,必须要要加上去-->
        <component :is="child" :father="msg"></component>
    </div>

    /*定义他爹*/
    var father = new Vue({        el:'#father',        data:{            child:'ch'//子组件的名字
            msg:''//给子组件的数据放这里
            childData:{                option1:'',                option2:'',                
            option3:'',                date:'',
            }
        },        components:{            ch:childObj//注册 ch,子组件的名字
        },        ready:function(){            this.msg=this.childData//你可以这样给子组件传值
        }
    })

    <!--子组件内容-->
    <template id="demoTp">
        <input type="text" v-model="father.option1" />
        <input type="text" v-model="father.option2" />
        <input type="text" v-model="father.option3" />
        <p>{{father.option3}}</p>
        <p>这里的father就是组件挂载点上那个father属性</p>
    </tempalte>