Blazor :如何从子组件到父组件传递ViewModel，反之亦然

Blazor是一个基于WebAssembly的开源框架，它允许使用C#语言进行客户端Web开发。在Blazor中，可以通过组件来构建用户界面，组件可以相互通信和传递数据。

要从子组件到父组件传递ViewModel，可以使用事件和委托的方式实现。以下是一种常见的方法：

在父组件中定义一个ViewModel，并将其传递给子组件作为参数。
在子组件中定义一个事件，用于向父组件传递数据。
在子组件中使用ViewModel，并在需要时触发事件将数据传递给父组件。

具体步骤如下：

在父组件中定义ViewModel：

public class ParentViewModel
{
    public string Data { get; set; }
}

在父组件中将ViewModel传递给子组件：

<ChildComponent ParentViewModel="parentViewModel" OnDataChanged="HandleDataChanged" />

@code {
    private ParentViewModel parentViewModel = new ParentViewModel();

    private void HandleDataChanged(string data)
    {
        parentViewModel.Data = data;
    }
}

在子组件中定义事件和ViewModel参数：

public partial class ChildComponent
{
    [Parameter]
    public ParentViewModel ParentViewModel { get; set; }

    [Parameter]
    public EventCallback<string> OnDataChanged { get; set; }

    private string childData;

    private async Task HandleButtonClick()
    {
        await OnDataChanged.InvokeAsync(childData);
    }
}

<div>
    <input type="text" bind="@childData" />
    <button @onclick="HandleButtonClick">Send Data to Parent</button>
</div>

在这个例子中，子组件通过事件OnDataChanged将数据传递给父组件。父组件中的HandleDataChanged方法会更新ViewModel中的数据。

Blazor相关产品和产品介绍链接地址：

相关·内容

VUE 如何将父组件中的数据传递到子组件中

因为异步调用的问题，如果我不采取手段，子页面没有办法获得父页面中的数据，页面将会显示为没有数据。问题和解决这个问题的原因就是子组件在初始化的时候，父组件还没有获得数据。...上面的代码能够让子组件正确加载数据。另外一个需要注意的是，在子组件中需要使用 props:['projects','currentPage'], 将数据从父总结中传递过来。...从父组件中将数据传递过来。 https://www.ossez.com/t/vue/14083

6.6K5 0

在 Vue 中，子组件如何向父组件传递数据？

在 Vue 中，子组件向父组件传递数据可以通过自定义事件来实现。下面是一种常见的方法：在子组件中，使用 $emit 方法触发一个自定义事件，并传递要传递给父组件的数据作为参数。... 传递数据给父组件 export default...{ methods: { sendDataToParent() { const data = '这是子组件传递给父组件的数据'; this....' 的自定义事件，并将数据 '这是子组件传递给父组件的数据' 作为参数传递给父组件。...在父组件中，使用 v-on 或简写的 @ 语法监听子组件触发的自定义事件，并在相应的处理函数中接收子组件传递的数据。

5483 0

Vue 父组件向子组件传递动态参数，子组件如何实时更新

项目问题介绍：父组件中填入各种查询条件，点击查询按钮查出符合条件的数据。其中，数据列表是引入的子组件。第一次加载的时候，子组件数据正常显示，再次查询的时候子组件怎么实现实时更新呢？...解决办法：子组件watch中（监听）父组件数据的变化以自己的项目为例：父组件：这是父组件中如何引用的子组件。testParams是我需要传过去的参数对象。参数名是params。...子组件：子组件通过props接收数据：子组件中watch监听对象类型的数据 //immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候...，就立即执行handler方法;值为false，则在数据发生变化的时候才执行handler 这样即可实现父组件动态传递对象参数给子组件，子组件实时更新数据。

6.4K2 0

Vue父组件向子组件传递一个动态的值，子组件如何保持实时更新实时更新？

方法一：子组件watch(监听)父组件数据的变化 watch基础类型的变量 data() { return { frontPoints: 0 } }, watch

4.1K2 0

(1330)Blazor系列：EventCallback, event from child to parent

前面说的都是从父组件传递数据到子组件的方法，我们现在要从子组件传数据到父组件，有办法做到反向传回去吗？...有的，那就是EventCallback，但是要把Delete改成而非，因为EventCallback是由子组件传向父组件，如果用，Id的流向就必须先这样...PostId);，当外部传来的GetPostId被触发时，就将Post.PostId传给父组件也就是。...();方法，让父组件知道状态改变了。...另外委托一旦在子组件中定义了，父组件就必须要调用，否则会发生错误，EventCallback则没这问题。

1.4K2 0

Blazor学习之旅(4)数据共享

本篇，我们来了解下在Blazor中数据是如何共享的，组件之间又该如何传递参数。关于Blazor组件在 Blazor 中，从名为“组件”的自包含代码部分生成 UI。...使用组件参数共享在父组件和子组件的此层次结构中，可以使用组件参数在它们之间共享信息。在子组件上定义这些参数，然后在父组件中设置其值。...组件参数不会从上级组件或沿着层次结构向下自动传递到下级组件。为了完美处理此问题，Blazor 包含了级联参数。在组件中设置级联参数的值时，其值将自动提供给所有子组件。...在父组件中，使用标记指定将级联到所有子组件的信息。此标记作为内置的 Blazor 组件实现。在该标记内呈现的任何组件都将能够访问该值。...最终效果：小结本篇，我们了解了数据如何在Blazor中共享。下一篇，我们学习一下在Blazor中数据绑定的各种花样。

4032 0

Blazor带我重玩前端(六)

currentCount)); __builder.CloseComponent(); } 8-15行是单项绑定的内容 16-18行是双向绑定的内容级联值和参数概述级联值和参数是一种将值从组件传递到其所有子组件的方法...当级联值发生更新的时候，这种更新将传递到所有的子组件，同时这组件将会自动调用StateHasChanged 。...一般情况下，我们的CascadingValue中可能会需要传递多个值的变化，那么这种变化是如何进行的呢。是通过两种方式，一种是类型推导，一种是命名传值。...由此可见，当子组件遇到多个相同类型的属性的时候，会选择离子组件最近的属性的值并传递到自己的属性中去。命名传值命名赋值就很单纯了，主要考虑绑定正确的名称就行。...性能问题默认情况下，Blazor会持续监控级联值的变化，并将其传递到所有子组件中，这将会占用一定的资源，并可能导致性能问题。

1.3K3 0

ASP.NET Core Blazor Webassembly 之数据绑定

要知道VUE的双向绑定可是实时同步的，那么Blazor如何做到在输入的同时就更新值呢，答案是使用@bind：event来指定回写的激发事件，我们改成“oninput”事件就可以实现： userName...父组件绑定数据到子组件组件之间往往都是嵌套的，很多子组件都依赖父组件的数据来决定如何呈现，这种场景非常常见。...我们还是继续修改上面的编辑组件，用户信息不在自己初始化，而是从父组件传递过来：子组件： ====================child================== userName...子组件传值给父组件？？原来我以为父组件使用@bind-UserInfo并且子组件实现了对应的changed方法就可以实现子组件跟父组件的自动传值，就跟input的双向绑定一样。...像下面这样：直接通过组件的属性直接把父组件的数据传递到子组件，效果跟上面是一样的，而且这样子组件我还能少写一个changed

4.8K3 0

如何给Blazor.Server加个API鉴权？

这三篇也是上中下了，从客户端，到服务端，最后今天简单说下权限，之后可能还是重点说下NetCore的相关内容吧。...1、Blazor权限控制有哪几种？...关于Blazor.Server开发中的权限控制呢，其实是有三个方向，或者说是三个模块的，这里简单说一下吧： 1、对.razor组件的加权我们通过之前的了解，已经发现了其实Blazor组件中，可以写...而且还是没有解决如何兼容Ids4的问题，(⊙﹏⊙)，放弃。...async Task OnSaveAsync(BlogArticle blogArticle) { BlogArticle = blogArticle; // 通过双向绑定，从子组件中获取

7883 0

（31）Vue安装

} }) 组件化应用构建一个组件树： ?...=> true // 设置属性也会影响到原始数据 vm.a = 2 data.a // => 2 // ……反之亦然 data.a = 3 vm.a // => 3 Object.freeze()...image.png MVVM分为Model、View、ViewModel三者 Model 代表数据模型 View 代表UI视图 ViewModel 负责监听 Model 中数据的改变并且控制视图的更新...父子组件通讯：父->子：使用props，子->父：$emit方法传递参数 .prevent: 提交事件不再重载页面； .stop: 阻止单击事件冒泡； .self: 当事件发生在该元素本身而不是子元素的时候会触发...Promise的特点状态一旦改变就再也不会发生改变了如何创建Promise实例？

1.8K2 0

Vue的使用你学会了吗？

} }) 组件化应用构建一个组件树： Vue 中注册组件很简单： // 定义名为 todo-item 的新组件 Vue.component('todo-item', { template: ' true // 设置属性也会影响到原始数据 vm.a = 2 data.a // => 2 // ……反之亦然 data.a = 3 vm.a // => 3 Object.freeze...this是在执行上下文创建时确定的一个在执行过程中不可更改的变量 MVVM分为Model、View、ViewModel三者 Model 代表数据模型 View 代表UI视图 ViewModel 负责监听...Model 中数据的改变并且控制视图的更新父子组件通讯：父->子：使用props，子->父：$emit方法传递参数 .prevent: 提交事件不再重载页面； .stop: 阻止单击事件冒泡； .self...: 事件侦听，事件发生的时候会调用； $route 是“路由信息对象” $router 是“路由实例”对象包括了路由的跳转方法，钩子函数等 Promise的特点状态一旦改变就再也不会发生改变了如何创建

1.4K5 0

常考vue面试题（附答案）

谈谈你对MVVM的理解为什么要有这些模式，目的：职责划分、分层（将Model层、View层进行分类）借鉴后端思想，对于前端而已，就是如何将数据同步到页面上MVC模式代表：Backbone + underscore...将结果返回给前端,页面重新渲染MVVM：传统的前端会将数据手动渲染到页面上, MVVM 模式不需要用户收到操作 dom 元素,将数据绑定到 viewModel 层上，会自动将数据渲染到页面中，视图变化会通知...Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据...子组件可以直接改变父组件的数据么，说明原因这是一个实践知识点，组件化开发过程中有个单项数据流原则，不在子组件中修改父组件是个常识问题思路讲讲单项数据流原则，表明为何不能这么做举几个常见场景的例子说说解决方案结合实践讲讲如果需要修改父组件状态应该如何做回答范例所有的...这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。另外，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。

6732 0

Vue 中，如何将函数作为 props 传递给组件

因此，尽管在Vue中可以把函数作为prop传递，但它被认为是一种反模式。使用事件事件是我们与 Vue 中的父组件通信的方式。这里有一个简短的例子来说明事件是如何工作的。...从子组件访问父组件的作用域里数据在许多情况下，我们试图解决的问题是访问来自不同作用域的数据。父组件有一个作用域，子组件有另一个作用域。...通常，我们希望从父组件访问子组件中的值，或者从子组件访问父组件中的值。Vue阻止我们直接这样做，这是一件好事。它使我们的组件更加具有封装性，并提高了它们的可重用性。...从父类获取值如果希望子组件访问父组件的方法，那么将方法直接作为 prop 传递似乎简单明了。在父组件中我们会这样做： <!...在其他情况下，我们可能想要从子元素中获取一个值到父元素中，我们为此使用了函数。例如，你可能正在这样做。父函数接受子函数的值并对其进行处理： <!

8.1K2 0

Blazor WebAssembly 修仙之途 - 组件与数据绑定

组件在 Blazor 中是必不可少的，UI 全靠它组装起来，和前端的 JS 组件是一个意思，比如：vue component、react component 等等。...借用官方文档的描述： Blazor 应用是使用组件构建的。组件是自包含的用户界面 (UI) 块，例如页、对话框或窗体。组件包含插入数据或响应 UI 事件所需的 HTML Tag和处理逻辑。...4.子父组件数据传递在 vue、react 等 js 中，都有子父组件传值概念，Blazor 也不例外。...父组件里，通过 @bind-Year 来绑定 Year 的 changed 事件，然后将父组件 ParentYear 的值传递过去，达成父级组件向子级组件传递值。...（2）子传父（链式绑定）子传父，无法直接通过 @bind 来实现，需要单独指定事件处理程序和值，我们更改上面的子组件，定义一个 OnYearChanged 事件，并将其绑定到文本框的 oninput

2.3K2 0

Vue.js 父组件向子组件传值和子组件向父组件传值

父组件向子组件传值组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据 // 创建 Vue 实例，得到 ViewModel var vm = new...-- 父组件，可以在引用子组件的时候，通过属性绑定（v-bind:）的形式, 把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 --> <com1 v-bind...原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；父组件将方法的引用传递给子组件，其中，getMsg是父组件中...$emit('func', 'OK'); // 调用父组件传递过来的方法，同时把数据传递出去 } } }); // 创建 Vue 实例，得到 ViewModel...', age: 6 } } }, methods: { myclick() { // 当点击子组件的按钮的时候，如何拿到父组件传递过来的

5.5K1 0

vue学习笔记4

父组件向子组件传值组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据 // 创建 Vue 实例，得到 ViewModel var vm = new...} }); 使用v-bind或简化指令，将数据传递到子组件中： ...子组件向父组件传值原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；父组件将方法的引用传递给子组件，其中...$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用 <!...$emit('func', 'OK'); // 调用父组件传递过来的方法，同时把数据传递出去 } } }); // 创建 Vue 实例，得到 ViewModel

5924 0

vue学习笔记3

组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据 // 创建 Vue 实例，得到 ViewModel var vm = new Vue({...}); 使用v-bind或简化指令，将数据传递到子组件中：子组件向父组件传值...原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；父组件将方法的引用传递给子组件，其中，getMsg是父组件中...$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用 <!...$emit('func', 'OK'); // 调用父组件传递过来的方法，同时把数据传递出去 } } }); // 创建 Vue 实例，得到 ViewModel

7522 0

.NET Core 3.0 Preview 6中对ASP.NET Core和Blazor的更新

} } Blazor指令属性 Blazor使用各种属性来影响组件的编译方式（例如ref，bind，事件处理程序等）。...要授权访问Blazor应用程序中的特定页面，请使用普通的[authorize]属性。可以使用新的@attribute指令将[authorize]属性应用于组件。。...有关如何为证书身份验证配置公共主机的所有选项和说明，请参阅文档。我们还将“Windows身份验证”扩展到Linux和macOS上。...，您可以非常精细地了解重新连接尝试如何随时间发生。...与HTTP中间件不同，拦截器允许您在序列化之前（在客户端上）和反序列化之后（在服务器上）访问实际的请求/响应对象，反之亦然。所有中间件都在请求端的拦截器之前运行，反之亦然。

6.7K2 0

vue基础（四）

1.9K4 0

Blazor入门：ASP.NET Core Razor 组件

组件：项目 Blazor 中，使用 .razor 结尾的文件，称为组件；而 Blazor 中的组件，正式名称是 razor 组件； Blazor 组件是 razor 过渡而来的，使用 razor 的基本语法特性...对于路由参数，其修饰的属性应该是 privite，对于其它组件传递参数，属性应该设置为 public。...被多个组件使用，不同组件要呈现不一样的内容；要根据父组件的配置，显示子组件；组件 A 要求使用到的组件 B，显示其传递的内容；简单来说，就是将页面内容作为复杂类型传递给另一个组件，要求这个组件显示出来...其作用是通过字典接收在父组件中出现但是未在 @code{} 中定义的参数属性。...在 test 页面输入 Key 和 Value，点击按钮，即可通知到所有正在打开 Index.razor 的页面。

2.8K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云