vue2父传子,子传父通信

ops/2024/11/14 21:27:46/

在Vue 2中,父子组件之间的通信可以通过props$emit来实现。

父传子:

  1. 在父组件中绑定要传递的数据到子组件的属性上。

  2. 在子组件中通过props选项声明接收的属性。

子传父:

  1. 在子组件中使用$emit方法触发一个事件,并传递数据。

  2. 在父组件中监听这个事件,并处理数据。

以下是示例代码:

父组件:

<template><div><child-component :parentData="parentData" @childEvent="handleChildEvent"></child-component></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentData: '父组件数据'};},methods: {handleChildEvent(data) {console.log('子组件传来的数据:', data);}}
};
</script>

子组件:

<template><div><button @click="sendToParent">点击发送数据到父组件</button></div>
</template><script>
export default {props: {parentData: String},methods: {sendToParent() {this.$emit('childEvent', '子组件数据');}}
};
</script>

在这个例子中,父组件通过:parentData="parentData"将数据parentData传递给子组件,并且监听名为childEvent的事件。子组件通过点击按钮触发sendToParent方法,使用this.$emit('childEvent', '子组件数据')发送数据给父组件。


http://www.ppmy.cn/ops/133683.html

相关文章

显示微服务间feign调用的日志

第一步 package com.niuniu.common.config;import com.niuniu.common.CommonConstant; import com.niuniu.common.utils.UserContext; import feign.Logger; import feign.RequestInterceptor; import feign.RequestTemplate; import org.springframework.context.annotation.…

Springboot 的Servlet Web 应用、响应式 Web 应用(Reactive)以及非 Web 应用(None)的特点和适用场景

基于 Servlet 的 Web 应用 (Servlet Web) 特点 使用传统的 Servlet API 和 Spring MVC 框架。 采用阻塞 I/O 模型&#xff0c;每个请求都会占用一个线程直到请求处理完毕。 适合处理同步请求-响应模式的应用。 依赖 spring-boot-starter-web&#xff1a;这是核心依赖&#xff0…

【嵌入式】手把手教你入门STM32的GPIO:使用GPIO输入

目录 GPIO 输入的基本概念 STM32 GPIO 输入配置步骤 注意事项 总结 GPIO 输入的基本概念 GPIO引脚可以配置为输入或输出模式。在输入模式下&#xff0c;GPIO用于读取外部信号&#xff0c;比如开关、传感器等。以下是关于STM32 GPIO输入的一些基本知识点&#xff1a; 引脚配…

2024年9月青少年软件编程(C语言/C++)等级考试试卷(九级)

青少年软件编程&#xff08;C 语言&#xff09; 等级考试试卷&#xff08;九级&#xff09; 1、 两个序列的故事 给定两个整数序列 A a 1 , a 2 , … , a n 与 B b 1 , b 2 , … , b n , 我们称 A 中长度为 (r-l1 ) 的连续子序列 a l , a l1 , … , a r (1 ≤ l ≤ r ≤ n) …

零碎02-接口文档管理

目录 一、背景故事 二、解决方案分析 1. 静态文档方案 2. Swagger Springfox 3. Knife4j增强方案 三、示例 1. 添加依赖 2. 配置Knife4j 3. 创建knife4j配置类 4. 启动Spring Boot项目并访问接口文档 5. 使用示例 6. 测试和使用 四、总结 一、背景故事 酷乐是一名…

2024-11-11 问AI: [AI面试题] 讨论人工智能的未来趋势和进步

文心一言 病预测、个性化医疗等方面的应用将显著提高医疗服务的效率和质量&#xff0c;推动医疗行业的数字化转型。AI金融&#xff1a;AI在风险管理、投资决策、客户服务等方面的应用将重塑金融行业&#xff0c;提高金融服务的智能化和个性化水平。 3. 伦理与监管 数据隐私与…

PostgreSQL 修改序列

ALTER SEQUENCE public.pitr_test_id_seq CACHE XXXXX; SELECT nextval(pitr_test_id_seq); SELECT setval(pitr_test_id_seq, 42); 下一次 nextval 会返回 43 SELECT setval(pitr_test_id_seq, 42, true); 同上 SELECT setval(pitr_test_id_seq, 42, false); …

ASP.NET 部署到IIS,访问其它服务器的共享文件 密码设定

asp.net 修改上面的 IIS需要在 配置文件 添加如下内容 》》》web.config <system.web><!--<identity impersonate"true"/>--><identity impersonate"true" userName"您的账号" password"您的密码" /><co…