在第一篇文章中，有提到過元件（component）這個概念。元件在 blazor 中是必不可少的，ui 全靠它組裝起來，和前端的 js 元件是乙個意思，比如：vue component、react component 等等。借用官方文件的描述：
blazor 應用是使用元件構建的。 元件是自包含的使用者介面 (ui) 塊，例如頁、對話方塊或窗體。 元件包含插入資料或響應 ui 事件所需的 html tag和處理邏輯。 元件非常靈活且輕量。 可在專案之間巢狀、重複使用和共享。元件一般以 .razor 為檔名字尾，且元件名必須以大寫字母開頭（猜測可能是和vue裡的命名限制一樣，表面和html標籤名重複）。
我們新建的專案，shared 資料夾中就有三個元件：
左側導航選單元件：
在主布局元件中應用了導航選單元件：
更多關於元件的資料請查閱官方文件：建立和使用 asp.net core razor 元件
razor 元件通過名為@bind的html元素屬性提供資料繫結功能，這個繫結是雙向的。
@bind是區分大小寫的，例如：@bind、@bind都是錯誤的，下面寫了乙個例子，將currentvalue繫結到兩個文字框中。
變 更@code
= 0;
private void changevalue()
}
@bind="currentvalue"等同於以下**：
點選按鈕，變更了值，也會應用到文字框中:
上面小節中，預設繫結了onchange事件，只有文字框失去焦點才會觸發，體驗不是很好，那麼可不可以在輸入的時候就同步更新值呢，當然是可以的，解決方案就是變更繫結事件為oninput，通過設定@bind:event屬性來變更繫結事件：
我們設定的 currentvalue 的型別是 int ，如果我們輸入字母，那麼字母將不會被接受，同時值會恢復到輸入前的正確值。
在 vue、react 等 js 中，都有子父元件傳值概念，blazor 也不例外。
（1）父傳子
新建乙個子元件命名為childcomponent
year:
@code
[parameter]
public eventcallbackyearchanged
}
year屬性和eventcallback型別的屬性yearchanged新建乙個父元件命名為parentcomponent
parentyear:
@code = 1978;
}
yearchanged是乙個約定命名，不能更改，更改將會報錯：
eventcallback 用於子父元件巢狀時公開事件，比如 yearchanged 就公開了子元件 year 屬性的 changed 事件。父元件裡，通過@bind-year來繫結year的 changed 事件，然後將父元件parentyear的值傳遞過去，達成父級元件向子級元件傳遞值。
等同於，如果使用後者，那麼事件命名將不會受約定命名限制。
執行效果：
（2）子傳父（鏈式繫結）
子傳父，無法直接通過@bind來實現，需要單獨指定事件處理程式和值，我們更改上面的子元件，定義乙個onyearchanged事件，並將其繫結到文字框的oninput事件，在事件裡手動更新了 year的值，並呼叫 yearchanged 來進行傳遞。
year:
@code
[parameter]
public eventcallbackyearchanged
private task onyearchanged(changeeventargs e)
}
react元件與元件之間的資料傳遞
常規的資料傳遞方式就是父傳子，子元件直接通過this.props來使用。子元件通過父元件的事件方法來傳遞 例如 父元件 export default class search extends component this.setserviceview this.setserviceview.bind...
Angular 5 子元件與父元件實現資料雙向繫結
1.實現父元件和子元件間 資料的雙向繫結 2.描述 子元件和父元件間，各有乙個標籤，在父元件input 內容，子元件的input 標籤上同步 在子元件的input 上輸入內容，父元件input 標籤頁同步 3.具體實現 在父元件html中寫如下 子元件input標籤 home input homei...
vue父元件與子元件之間的資料傳遞
父元件向子元件傳遞資料 父元件用資料繫結 子元件用props接收 template div model son datas fatherdata model son div template script import modelson from views test test vue model ...