Blazor University (4)组件 — 单向绑定
原文链接:https://blazor-university.com/components/one-way-binding/
单向绑定
源代码[1]
此时我们在页面内显示了一个组件,但内容是静态的。我们真正想要的是能够动态输出内容。
如果我们更改 /Components/MyFirstComponent.razor 的内容,我们可以引入一个私有成员并使用 @
符号输出该成员的值。
<div>CurrentCounterValue in MyFirstComponent is @CurrentCounterValue
</div>@code {private int CurrentCounterValue = 42;
}
通过参数接收值
组件内的 CurrentCounterValue
总是显示值“42”,但是如果我们希望父组件告诉我们要显示哪个值呢?为此,创建一个名为 MySecondComponent 的新组件并从 MyFirstComponent 复制标记,然后将私有成员更改为公共属性。
<div>CurrentCounterValue in MySecondComponent is @CurrentCounterValue
</div>@code {public int CurrentCounterValue { get; set; }
}
编辑 Counter 页面,添加一个 MySecondComponent 组件,并设置其 CurrentCounterValue,如下所示:
<MySecondComponent CurrentCounterValue=@currentCount/>
运行应用程序并导航到 Counter 页面现在将在浏览器的控制台窗口中显示错误。
WASM: System.InvalidOperationException: Object of type ‘OneWayBinding.Client.Components.MySecondComponent’ has a property matching the name ‘CurrentCounterValue’, but it does not have [ParameterAttribute] or [CascadingParameterAttribute] applied.
这清楚地告诉我们缺少什么。要向我们的组件添加参数,我们必须使用 [Parameter]
属性来装饰我们组件的属性。
<div>CurrentCounterValue in MySecondComponent is @CurrentCounterValue
</div>@code {[Parameter]public int CurrentCounterValue { get; set; }
}
这会通知 Blazor 我们希望我们的组件上有一个参数,该参数可以通过看起来像 HTML 的属性进行设置。每当重新呈现父组件时,Blazor 也会重新呈现它提供参数值的任何子组件。这确保子组件被重新渲染以表示通过 [Parameter]
修饰属性向下传递给组件的状态的任何可能变化。
如果我们再次运行我们的应用程序并导航到 Counter 页面,我们将看到每当 Counter 页面中的 currentCount
发生变化时,它都会通过其 CurrentCounterValue
属性将该变化推送到我们的嵌入式组件。
注意: 参数必须是公共属性。
在继续学习双向绑定的工作原理之前,我们首先需要了解组件事件和指令。
参考资料
[1]
源代码: https://github.com/mrpmorris/blazor-university/tree/master/src/Components/OneWayBinding
Blazor University (4)组件 — 单向绑定相关推荐
- Blazor University (7)组件 — 双向绑定
原文链接:https://blazor-university.com/components/two-way-binding/ 双向绑定 源代码[1] 注意: 如果您还没有这样做过,请在继续本节之前先执 ...
- Blazor University (5)组件 — 字面量、表达式和指令
原文链接:https://blazor-university.com/components/literals-expressions-and-directives/ 字面量.表达式和指令 源代码[1] ...
- vue3 子组件上绑定(v-model=“xx“) 父组件传过来的值后报错
遇到的问题 vue3的项目中, 升级了vant的版本(^4.0.7)后, 子组件中用v-model的地方出现了报错 报错的内容 v-model cannot be used on a prop, be ...
- vue 单向绑定 双向绑定
参考:[Vue]vue 单向绑定& 双向绑定 - vickylinj - 博客园 在react中是单向数据绑定,而Vue.js 最显著的特点就是响应式和数据驱动,也就是将Model和View进 ...
- vue 单相绑定_Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)...
Vuejs第一篇之入门教程详解(单向绑定.双向绑定.列表渲染.响应函数) 2018-12-30 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素 ...
- 这就是为什么我们需要在React的类组件中绑定事件处理程序
by Saurabh Misra 索拉·米斯拉(Saurabh Misra) 这就是为什么我们需要在React的类组件中绑定事件处理程序 (This is why we need to bind ev ...
- 用原生 JS 实现 MVVM 框架2——单向绑定
上一篇写了实现 MVVM 框架的一些基本概念 本篇用代码来实现一个完整的 MVVM 框架 思考 假设有如下代码,data里面的name会和试图中的{{name}}--一一映射,修改data的值,会直接 ...
- v-bind单向绑定与v-model双向绑定
Vue.js 最显著的特点就是响应式和数据驱动,也就是将Model和View(View在下面的图示中)进行单向绑定或者双向绑定. Vue.js主要有三种数据绑定形式,并且都是基于单向绑定和双向绑定. ...
- Blazor 模板化组件开发指南
翻译自 Waqas Anwar 2021年4月15日的文章 <A Developer's Guide To Blazor Templated Components> [1] 在我之前的一篇 ...
最新文章
- 推荐系统的个性化排名
- ctfmn.exe——藏在字体目录FONTS下的***
- 沽空机构两度狙击,波司登2018/19财年业绩显著,未来到底是否值得关注?
- python中的PEP是什么?怎么理解?(转)
- PWN-PRACTICE-BUUCTF-10
- 采用光线跟踪绘制场景 c++_光线追踪的相干性聚集:硬件光线追踪的优势
- 特斯拉好事连连:自动驾驶新硬件性能提升10倍,两名新董事昨晚上任,股价涨5.6%...
- IOS APP 上传到AppStore
- oracle 导入DMP数据 imp 10g
- 关于 Profile
- Oracle10g BIGFILE表空间带来的好处
- 时空幻境-patch
- 随机发生器:线性同余法
- 对数坐标归一化_数据归一化处理方法 数据处理之标准化/归一化方法
- jQuery周日历选择器代码
- JSPstudy恢复80端口
- python输出姓名_Python简单生成随机姓名的方法示例
- 洛雪音乐助手(五音版)
- My97DatePicker事件无效,触发事件calendar.js,datepicker.css等文件无法加载
- SRRC认证问题合集