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

本来想设计一个组件,如图所示

完整的图是组件,名叫QueryForm,其中三个按钮和分割线是组件内置的,各种input输入框是slot进来的。QueryForm的源码如图所示:


现在我希望我能指定每个input所绑定的变量,并且再按下搜索按钮的时候,能够把各个变量组成的那个总的object对象返回到QueryForm父组件层来。

  • 我记得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>

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

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

  • iframe 的使用
  • QWebView如何获取内嵌页面中的html内容
  • PHP和Ajax做的分页跳转,可是出不来。望大神能看看
  • 在使用Ajax加载外部文件,为什么在提示之后才加载完成?
  • npm run dev的报错问题
  • javascript初级问题
  • Ext中如何将元素变成可拖动的?
  • 我叙事使用鼠标右键,弹出自定义框的功能。但是如何阻止浏览器默认的那个行为?
  • 关于es6的函数默认参数
  • 函数return之后的代码会还执行吗
  • js设置cookie过期时间设置无效?