国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

嘗試寫一個Vue.js的comfirm對話框component！

williamwen1986 / 2162人閱讀

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

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

方法一

代碼如下




    
    Document

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

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

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

以上來自官網(wǎng)

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

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

所以還是另找辦法吧OTL

方法二

代碼如下




    
    Document

后來，發(fā)現(xiàn)居然還有這個東西！！

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


ref 被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子組件上，引用就指向組件實例

以上來自官網(wǎng)

this.$refs.modal

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

點擊觸發(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();
}

還很不完善，希望各位能給點建議OTL

PS：這個自用的comfirm為了在引入的時候少寫東西，我就盡量吧css寫到元素里了...

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82058.html

相關(guān)文章

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

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

    muzhuyu 評論0 收藏0

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

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

    linkin 評論0 收藏0

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

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

    shadowbook 評論0 收藏0

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

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

    NicolasHe 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<