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

williamwen1986 發布于2019-08-20 15:10 / 2153人閱讀

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

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

方法一

代碼如下




    
    Document

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

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

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

以上來自官網

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

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

所以還是另找辦法吧OTL

方法二

代碼如下




    
    Document

后來，發現居然還有這個東西！！

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

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

以上來自官網

this.$refs.modal

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

點擊觸發dialog的函數就可以像是這樣

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

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

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寫到元素里了...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82058.html

vue插件開發練習--實用彈窗

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

muzhuyu 2019-08-22 11:06 評論0 收藏0
在Vue項目中使用ElementUI(一)

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

linkin 2019-08-02 15:27 評論0 收藏0
在Vue項目中使用ElementUI(一)

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

shadowbook 2019-08-23 18:27 評論0 收藏0
在Vue項目中使用ElementUI(一)

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

NicolasHe 2019-08-30 11:18 評論0 收藏0