Blazor入手教程(五)組件
組件是相當重要的一部分內容。Blazor是一種單頁應用模式,單頁應用里面萬物皆可為組件,
一個頁面是一個組件,一段可重用的ui代碼也可以做成一個組件。
Vue中創建組件的方式大概有單文件組件,字符串模板組件等等。
Blazor中創建組件的方式和Vue也差不多且更簡單。一個.razor文件就是一個組件,這點類似於vue的單文件組件。
我們試着創建一個模態框組件嗎,單獨創建一個文件夾來放置組件。
注意:組件名首字母必須大寫。
Index.razor 合法
index.razor. 不合法
_index.razor 合法
調用組件
調用組件時只需要像寫html標簽一樣寫上去就行了,並可以把參數傳遞過去
寫法是不是和vue一毛一樣?
來看一下效果
而且我們可以看到,每次點擊按鈕時,就會調用子組件中的SetParametersAsync方法。
組件參數 [Parameter]
[Parameters]不僅僅可以標記路由參數,而且他還可以標記組件參數。
使用[Parameter]特性標記了的屬性,表示這是一個組件參數,可以和父組件之間進行通信。(和vue中的props是一個意思,沒有標記的只能在組件內部使用,就和vue中的data是一個意思)。
通過@ref獲取子組件引用
獲取子組件的引用有兩步。
1,在代碼里定一個子組件類型的字段
2,在調用組件的標簽里面使用@ref 指向第一步定義的字段 (是不是和vue的面的@ref一模一樣)
這樣我們就可以通過modal直接調用子組件里面的方法
一個簡單的例子
我們使用上面的引用直接修改子組件的屬性看看會有什么效果
Vs直接告訴我們,不能在外部修改參數。所以這樣式行不通的
子組件修改父組件狀態
模態框一定會有一個關閉的功能,就像下面這樣。點擊關閉,修改模態框的show為false,這段代碼是在子組件中,但是修改的應該是父組件的狀態,因為模態框的狀態show往往是由父組件來維護的。
在vue里面子組件修改父組件狀態一般有兩種常用的方法:
1,使用emit。在子組件里面修改時使用This.$emit(“update:data”,value),在父組件設置狀態為model.sync
2,在父組件使用回調函數。
Blazor修改父組件狀態也有對應的兩種
方法一
1,在子組件里面定義一個事件,
2,在父組件里面使用組件是設置事件的回調函數
3,子組件里面修改時,通過invoke回調函數來實現修改。
這種方法的缺點就是必須在父組件里面額外定義一個回調函數,並不是一個實用的方法,着重介紹第二種方法。
方法二,使用@bind-參數名
1,在定義子組件show 參數的同時,定義一個 EventCallback<bool> 類型的參數,且該參數的名字約定必須是上面定義名字參數名+Changed。
比如:上面定義了一個參數show,那么同時定義一個回調參數showChange,名字必須為showChanged。
2,在子組件內修改狀態時使用 showChange.Invoke(this.show),將狀態通知到父組件。
3,父組件內設置子組件參數時,不在使用原來的show綁定,而使用@bind-show綁定
這種方法的優點就是父組件不需要關心子組件。
。
級聯參數 [CascadingParameter]
級聯參數可以直接將參數注入到孫組件而不通過子組件,級聯參數做一些全局性的設置還是很不錯的。
使用級聯參數步驟:
1,定義父,子,孫三個組件。父組件中使用<CascadingValue Value="msg"></CascadingValue>
標簽包裹子組件,這里的Value參數就是要向下傳遞的值。
2,父組件中使用子組件,子組件中使用孫組件
3,孫組件中使用[CascadingParameter]標記參數為級聯參數。
父:
子:
孫:
最終效果: