uniapp父子组件通信

news/2024/10/18 9:17:37/

在Uni-app中,可以使用props和$emit方法实现父子组件之间的通信。
父组件向子组件传递数据(props):
1. 在父组件中,在子组件的标签上使用属性绑定方式传递数据

<template>  <child-component :message="parentMessage"></child-component>  
</template>  

2. 然后,在子组件中通过props接收父组件传递过来的数据

<template>  <div>{{ message }}</div>  
</template>  
<script>  
export default {  props: {  message: String  }  
};  
</script>  

这样,父组件中的parentMessage就会传递给子组件的message

子组件向父组件传递数据($emit):

1. 在子组件中,可以通过$emit方法触发自定义事件,并传递数据给父组件

<template>  <button @click="sendDataToParent">发送数据给父组件</button>  
</template>  
<script>  
export default {  methods: {  sendDataToParent() {  this.$emit('childEvent', 'Hello from child');  }  }  
};  
</script>  

当点击按钮时,会触发sendDataToParent方法,并使用$emit方法触发名为childEvent的自定义事件,并传递数据'Hello from child'给父组件。
2. 在父组件中,可以使用v-on指令监听子组件触发的自定义事件,并在事件处理函数中获取子组件传递的数据

<template>  <child-component @childEvent="receiveDataFromChild"></child-component>  
</template>  
<script>  
export default {  methods: {  receiveDataFromChild(data) {  console.log(data); // 输出 'Hello from child'  }  }  
};  
</script>  

通过在子组件的标签上使用v-on指令和监听子组件的自定义事件childEvent,可以在父组件中的receiveDataFromChild方法中获取子组件传递的数据。


http://www.ppmy.cn/news/1341704.html

相关文章

回归预测 | Matlab实现CPO-CNN-LSTM-Attention冠豪猪优化卷积长短期记忆神经网络注意力机制多变量回归预测(SE注意力机制)

回归预测 | Matlab实现CPO-CNN-LSTM-Attention冠豪猪优化卷积长短期记忆神经网络注意力机制多变量回归预测&#xff08;SE注意力机制&#xff09; 目录 回归预测 | Matlab实现CPO-CNN-LSTM-Attention冠豪猪优化卷积长短期记忆神经网络注意力机制多变量回归预测&#xff08;SE注…

编程笔记 html5cssjs 068 JavaScrip Boolean数据类型

编程笔记 html5&css&js 068 JavaScrip Boolean数据类型 一、Boolean数据类型二、运算符三、代码示例小结 JavaScript中的Boolean数据类型详解及示例。在JavaScript中&#xff0c;Boolean&#xff08;布尔&#xff09;数据类型是一种基本数据类型&#xff0c;它有两个可…

Shell脚本监控进程异常终止并重启

首先介绍一下我现在的需求&#xff0c;我服务器上挂了一个用python编写的kook机器人&#xff0c;但有时候机器人程序会异常终止&#xff0c;不知道什么原因&#xff0c;因此需要监控机器人程序是否有在运行&#xff0c;如果没有就重启机器人程序。 可以写一个Shell脚本&#x…

论文阅读-MapReduce

论文名称&#xff1a;MapReduce: Simplified Data Processing on Large Clusters 翻译的效果不是很好&#xff0c;有空再看一遍&#xff0c;参照一下别人翻译的。 MapReduce:Simplified Data Processing on Large Clusters 中文翻译版(转) - 阿洒 - 博客园 (cnblogs.com) 概…

css新手教程

css新手教程 课程&#xff1a;14、盒子模型及边框使用_哔哩哔哩_bilibili 一.什么是CSS 1.什么是CSS Cascading Style Sheet 层叠样式表。 CSS&#xff1a;表现&#xff08;美化网页&#xff09; 字体&#xff0c;颜色&#xff0c;边距&#xff0c;高度&#xff0c;宽度&am…

PyTorch的nn.Module类的详细介绍

在PyTorch中&#xff0c;nn.Module 类是构建神经网络模型的基础类&#xff0c;所有自定义的层、模块或整个神经网络架构都需要继承自这个类。nn.Module 类提供了一系列属性和方法用于管理网络的结构和训练过程中的计算。 1. PyTorch中nn.Module基类的定义 在PyTorch中&#xff…

在flutter中集成Excel导入和导出

flutter中集成Excel导入和导出功能 1、需要的依赖 在pubspec.yaml #excel导出syncfusion_flutter_xlsio: ^24.1.45open_file: ^3.0.1#导入excelflutter_excel: ^1.0.1#选择文件的依赖file_picker: ^6.1.1&#xff08;1&#xff09;依赖说明 在测试时&#xff0c;我们在使用导…

Pandas - Groupby对多个值分组并绘图示例

在本文中&#xff0c;我们将学习如何按多个值分组并一次性绘制结果。在这里&#xff0c;我们从seaborn库中获取一个数据集的“exercise.csv”文件&#xff0c;然后形成不同的groupby数据并可视化结果。 对于此程序&#xff0c;所需步骤如下&#xff1a; 导入相关库创建并导入…