vue2父传子,子传父通信

news/2024/11/20 4:25:50/

在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/news/1548410.html

相关文章

设计模式-Adapter(适配器模式)GO语言版本

前言 个人感觉Adapter模式核心就在于接口之间的转换。将已有的一些接口转换成其他接口形式。并且一般用于对象上&#xff0c;而不是系统上 问题 就用一个简单的问题&#xff0c;懂数据结构的同学可能知道双端队列。那么就用双端队列实现一个栈&#xff08;stack&#xff09;或…

vue 获取摄像头拍照,并旋转、裁剪生成新的图片

描述&#xff1a; vue项目中&#xff0c;获取摄像头进行拍照&#xff0c;并对拍摄的图片进行旋转、裁剪等处理 html部分 <!-- 摄像头列表 --> <el-select v-model"autoVal" size"small" change"change(auto, true)"><el-option…

【VLANPWN】一款针对VLAN的安全研究和渗透测试工具

关于VLANPWN VLANPWN是一款针对VLAN的安全研究和渗透测试工具&#xff0c;该工具可以帮助广大研究人员通过对VLAN执行渗透测试&#xff0c;来研究和分析目标VLAN的安全状况。该工具专为红队研究人员和安全学习爱好者设计&#xff0c;旨在训练网络工程师提升网络的安全性能&…

Towards Reasoning in Large Language Models: A Survey

文章目录 题目摘要引言什么是推理?走向大型语言模型中的推理测量大型语言模型中的推理发现与启示反思、讨论和未来方向 为什么要推理?结论题目 大型语言模型中的推理:一项调查 论文地址:https://arxiv.org/abs/2212.10403 项目地址: https://github.com/jeffhj/LM-reason…

游戏引擎学习第15天

视频参考:https://www.bilibili.com/video/BV1mbUBY7E24 关于游戏中文件输入输出&#xff08;IO&#xff09;操作的讨论。主要分为两类&#xff1a; 只读资产的加载 这部分主要涉及游戏中用于展示和运行的只读资源&#xff0c;例如音乐、音效、美术资源&#xff08;如 3D 模型和…

电子工牌独立双通道定向拾音方案(有视频演示)

现在一些行业的客服人员在面对客户都要求使用电子工牌分别记录客服和顾客的声音,我们利用双麦克风阵列双波束拾音的方案设计了一个电子工牌方案.可以有效分别记录客服和顾客的声音. 方案思路: 我们采用了一个双麦阵列波束拾音的模块A-59,此模块可以利用2个麦克风组成阵列进行双…

SQL注入注入方式(大纲)

SQL注入注入方式&#xff08;大纲&#xff09; 常规注入 通常没有任何过滤&#xff0c;直接把参数存放到SQL语句中。 宽字节注入 GBK 编码 两个字节表示一个字符ASCII 编码 一个字节表示一个字符MYSQL默认字节集是GBK等宽字节字符集 原理&#xff1a; 设置MySQL时错误配置…

【Mysql】函数--日期函数(上)

日期函数第一部分 函数名 描述 UNIX_TIMESTAMP() 返回从1970-01-01 00:00:00到目前的毫秒值 UNIX_TIMESTAMP(DATE_STRING) 将指…