How does Vue subcomponent get the form binding passed in by slot?

  node.js, question

I wanted to design a component, as shown in the figure.

图片描述

The complete picture is a component, named QueryForm, in which three buttons and dividing lines are built into the component, and various input input boxes are entered by slot. The source code of QueryForm is shown in the figure below:

图片描述
图片描述

Now I hope I can specify the variables to which each input is bound, and when I press the search button again, I can return the total object object composed of all variables to the QueryForm parent component layer.

  • I remember vue website example has a saying like this:
    clipboard.png

In other words, if there is only one component instance in your application, you can completely avoid the problem of sharing data among all component instances. That is,

var childData={
 option1:'',
 option2:'',
 date:''
 bracket
 var child=Vue.extend({
 tempalte:'#demoTemplate',
 data:childData,
 })
 var father=new Vue({
 el:'#fatherId',
 data:{
 childData:childData,
 ...
 },
 Components:{// local registration
 ch:child
 bracket
 })

So father and son use childData’s data together.

  • Of course, the one above is still my guess-_-> |, after all, I haven’t tried this, you can try it. Following is the standard practice:
    Using props to transmit values, thev-model="msg"This part of msg of is defined on the parent component, namely:

/* subcomponent definition */
 var childObj=Vue.extend({
 template:'#demoTp',
 props:['father']
 });
<!  -what the subassembly looks like in his father->
 <div id="father">
 <!  -:it is v-bind and must be added->
 <component :is="child" :father="msg"></component>
 </div>
/* define his father */
 var father = new Vue({
 el:'#father',
 data:{
 Child:'ch'// name of subassembly
 Msg:''// Put the data for the subcomponents here
 childData:{
 option1:'',
 option2:'',
 option3:'',
 date:'',
 bracket
 },
 components:{
 Ch:childObj// register ch, name of sub-component
 },
 ready:function(){
 This.msg=this.childData// you can pass values to subcomponents like this
 bracket
 })
<!  -subcomponent content->
 <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 > the father here is the father attribute on the component mount point < /p >
 </tempalte>