首頁猿問 Vue子組件如何獲取slot傳入的...

Vue子組件如何獲取slot傳入的表單綁定？

JavaScript

尚方寶劍之說 2018-09-10 12:14:23

本來想設(shè)計一個組件，如圖所示完整的圖是組件，名叫QueryForm，其中三個按鈕和分割線是組件內(nèi)置的，各種input輸入框是slot進(jìn)來的。QueryForm的源碼如圖所示：現(xiàn)在我希望我能指定每個input所綁定的變量，并且再按下搜索按鈕的時候，能夠把各個變量組成的那個總的object對象返回到QueryForm父組件層來。

查看完整描述

1 回答

藍(lán)山帝景

TA貢獻(xiàn)1843條經(jīng)驗獲得超7個贊

我記得vue官網(wǎng)例子有一個這樣的說法：

也就是說，假如你的應(yīng)用里面就只有這一個組件實例的話，那么你完全可以不用擔(dān)心所有組件實例共享數(shù)據(jù)的問題。即

    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的數(shù)據(jù)

當(dāng)然上面那個還是我猜的→_→||，畢竟我也沒試過這樣，你可以試試。接下來是標(biāo)準(zhǔn)的做法：
利用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:''//給子組件的數(shù)據(jù)放這里
            childData:{                option1:'',                option2:'',                
            option3:'',                date:'',
            }
        },        components:{            ch:childObj//注冊 ch,子組件的名字
        },        ready:function(){            this.msg=this.childData//你可以這樣給子組件傳值
        }
    })

    <!--子組件內(nèi)容-->
    <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>

反對回復(fù) 2018-10-09