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>

Answer 2

个人感觉这种绑定的话 应该不太好搞，如果你一定要动态适配内容 可以通过属性配置动态生成模板 是不是更好些 例如传一个obj{ input:{},input{},date{}}这样你queryForm里可以遍历属性动态绑定里面的model进而实现这种需求。
因为你这种思路 默认就是不知道slot的内容 你怎么还能绑定它呢 是吧 一点思路仅供参考

Answer 3

QueryForm表单内容做成slot没什么必要，本来你的重置确认功能和表单都耦合，你硬是拆分开，如果有几个内容不一样的表单的话这里的逻辑会很乱，干脆一种表单做一个组件，只抽象出公共的功能模块。
或者queryForm里维护一个表单项目列表，里面标记了，什么样的表单，表单的值等等。也就不存在你这种slot，父子组件之间通信的问题。