Blazor中传递数据的几种情况总结(三):从子组件传回父组件

从子组件传回到父组件
子组件ChildComponent:

@code{
[Parameter]
public EventCallback<int> I { get; set; }
private void SendBack()
{
   I.InvokeAsync(3);//等待某个事件触发SendBack,就把3传回了父组件的x
}
}

父组件:

<ChildComponent I = "HandleRecievedInt">
</ChildComponent>
@code{
private void HandleRecievedInt(int x)
{   
}
### 实现子组件修改父组件数据 在 Vue.js 中,推荐通过事件传递的方式让子组件通知父组件更新其状态。这种方式保持了父子组件间的单向数据流,使得应用更易于理解和维护。 #### 使用自定义事件实现通信 父组件可以通过 `v-bind` 向下传递 prop 给子组件,在此过程中可以绑定一些初始值给子组件使用。当子组件需要改变这些来自父级的数据时,则应该触发一个自定义事件来告知父组件执行相应的操作[^1]。 ```html <template> <div> <!-- 子组件接收两个属性并监听 contentChanged 事件 --> <child-component :title="parentTitle" :content="parentContent" @content-changed="handleContentChange"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { name: 'ParentComponent', components: { ChildComponent }, data() { return { parentTitle: '这是父组件设置的标题', parentContent: '这是父组件提供给子组件的内容' }; }, methods: { handleContentChange(updatedContent) { console.log('接收到新的内容:', updatedContent); this.parentContent = updatedContent; } } }; </script> ``` 对于上述代码中的 `<child-component>` 部分: ```html <!-- 假设这是 ChildComponent.vue 文件内的模板部分 --> <template> <div class="child"> <h2>{{ title }}</h2> <p v-if="!editing">{{ content }}</p> <input type="text" v-model="newContent" v-else /> <button @click="editMode">编辑/保存</button> </div> </template> <script> export default { props: ['title', 'content'], emits: ['content-changed'], // 明确声明可发出的事件名称 data() { return { editing: false, newContent: '' }; }, watch: { content(newValue) { this.newContent = newValue; } }, created() { this.newContent = this.content; }, methods: { editMode() { if (this.editing === true) { // 当处于编辑模式且点击按钮时发送新内容到父组件 this.$emit('content-changed', this.newContent); // 发送事件至父组件 } this.editing = !this.editing; } } }; </script> ``` 这段代码展示了如何利用 `$emit()` 函数从子组件发射一个名为 `content-changed` 的事件,并携带参数传回父组件处理。父组件则负责响应这个特定事件并通过回调函数更新自身的 state 或者其他逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值