成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

嘗試寫(xiě)一個(gè)Vue.js的comfirm對(duì)話框component！

williamwen1986 / 2164人閱讀

摘要：第一次嘗試，感覺(jué)是個(gè)失敗經(jīng)歷了方法一代碼如下與子組件交流，一開(kāi)始就想到了用動(dòng)態(tài)綁定到子組件的這樣做我們可以很容易在父組件通過(guò)改變從而讓顯示但是怎么讓消失組件實(shí)例的作用域是孤立的。

本功能適用于瀏覽器
正在寫(xiě)一個(gè)web app，經(jīng)常用到comfirm，為了UI的整體一致，還是想自己寫(xiě)一個(gè)component。
第一次嘗試，感覺(jué)是個(gè)失敗經(jīng)歷了......

方法一

代碼如下




    
    Document

與子組件交流，一開(kāi)始就想到了用props
動(dòng)態(tài)綁定isShow到子組件的props——ishow

這樣做我們可以很容易在父組件通過(guò)改變isShow從而讓dialog顯示
但是怎么讓dialog消失？

組件實(shí)例的作用域是孤立的。這意味著不能(也不應(yīng)該)在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。要讓子組件使用父組件的數(shù)據(jù)，我們需要通過(guò)子組件的props選項(xiàng)。

以上來(lái)自官網(wǎng)

不能直接在子組件改變prop這就有點(diǎn)麻煩了...
需要用this.$emit("hide")觸發(fā)hide事件，然后在組件上@hide="showDialog"監(jiān)聽(tīng)hide事件，再然后觸發(fā)父組件的showDialog方法
如果選項(xiàng)有兩個(gè)，就要把上面的步驟再重復(fù)一次

完全超出了我的預(yù)計(jì)，本來(lái)想復(fù)用，但是用一次寫(xiě)這么一大堆東西怎么復(fù)用呢...

所以還是另找辦法吧OTL

方法二

代碼如下




    
    Document

后來(lái)，發(fā)現(xiàn)居然還有這個(gè)東西?。?/p> 

盡管有 props 和 events ，但是有時(shí)仍然需要在 JavaScript 中直接訪問(wèn)子組件。為此可以使用 ref 為子組件指定一個(gè)索引 ID 。


ref 被用來(lái)給元素或子組件注冊(cè)引用信息。引用信息將會(huì)注冊(cè)在父組件的 $refs 對(duì)象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子組件上，引用就指向組件實(shí)例

以上來(lái)自官網(wǎng)

this.$refs.modal

居然能夠直接訪問(wèn)子組件！那直接在子組件處理一切不就好了啊！

點(diǎn)擊觸發(fā)dialog的函數(shù)就可以像是這樣

this.$refs.modal.show(function(){
    console.log("yes");//這是選擇yes的回調(diào)函數(shù)
},function(){
    console.log("no");//這是選擇no的回調(diào)函數(shù)
});

剩下的東西子組件自己解決！

hide:function(){
    this.isShow = false;
},
show:function(yescb,nocb){
    this.isShow = true;
    this.yescb = yescb;
    this.nocb = nocb;
},
yes:function(){
    this.yescb();
},
no:function(){
    this.nocb();
}

還很不完善，希望各位能給點(diǎn)建議OTL

PS：這個(gè)自用的comfirm為了在引入的時(shí)候少寫(xiě)東西，我就盡量吧css寫(xiě)到元素里了...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82058.html

相關(guān)文章

  • vue插件開(kāi)發(fā)練習(xí)--實(shí)用彈窗

    摘要：前言上回說(shuō)了組件組件開(kāi)發(fā)練習(xí)焦點(diǎn)圖切換的一個(gè)練習(xí)項(xiàng)目，這次換下口味，說(shuō)下的插件練手的項(xiàng)目。和組件開(kāi)發(fā)的目錄相比，區(qū)別就在于這個(gè)文件夾上。開(kāi)發(fā)過(guò)程把項(xiàng)目跑起來(lái)首先，先弄這個(gè)組件。最后還需要一個(gè)變量，控制彈窗是否顯示。 1.前言 上回說(shuō)了組件（vue組件開(kāi)發(fā)練習(xí)--焦點(diǎn)圖切換）的一個(gè)練習(xí)項(xiàng)目，這次換下口味，說(shuō)下vue的插件練手的項(xiàng)目。相對(duì)于現(xiàn)在之前的焦點(diǎn)圖切換的組件，這個(gè)可能就更簡(jiǎn)單了，基...

    muzhuyu 評(píng)論0 收藏0

  • 在Vue項(xiàng)目中使用ElementUI(一)

    摘要：這是一段內(nèi)容標(biāo)題名稱(chēng)確定點(diǎn)擊確定后的回調(diào)函數(shù)確認(rèn)消息彈框提示用戶確認(rèn)其已經(jīng)觸發(fā)的動(dòng)作，并詢問(wèn)是否進(jìn)行此操作時(shí)會(huì)用到此對(duì)話框。。 初始化一個(gè)Vue項(xiàng)目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...

    linkin 評(píng)論0 收藏0

  • 在Vue項(xiàng)目中使用ElementUI(一)

    摘要：這是一段內(nèi)容標(biāo)題名稱(chēng)確定點(diǎn)擊確定后的回調(diào)函數(shù)確認(rèn)消息彈框提示用戶確認(rèn)其已經(jīng)觸發(fā)的動(dòng)作，并詢問(wèn)是否進(jìn)行此操作時(shí)會(huì)用到此對(duì)話框。。 初始化一個(gè)Vue項(xiàng)目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...

    shadowbook 評(píng)論0 收藏0

  • 在Vue項(xiàng)目中使用ElementUI(一)

    摘要：這是一段內(nèi)容標(biāo)題名稱(chēng)確定點(diǎn)擊確定后的回調(diào)函數(shù)確認(rèn)消息彈框提示用戶確認(rèn)其已經(jīng)觸發(fā)的動(dòng)作，并詢問(wèn)是否進(jìn)行此操作時(shí)會(huì)用到此對(duì)話框。。 初始化一個(gè)Vue項(xiàng)目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...

    NicolasHe 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<