uniapp父子组件通信

在Uni-app中,可以使用props和$emit方法实现父子组件之间的通信。
父组件向子组件传递数据(props):

  1. 在父组件中,在子组件的标签上使用属性绑定方式传递数据
html 复制代码
<template>  
  <child-component :message="parentMessage"></child-component>  
</template>  
  1. 然后,在子组件中通过props接收父组件传递过来的数据
javascript 复制代码
<template>  
  <div>{{ message }}</div>  
</template>  
<script>  
export default {  
  props: {  
    message: String  
  }  
};  
</script>  

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

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

  1. 在子组件中,可以通过$emit方法触发自定义事件,并传递数据给父组件
javascript 复制代码
<template>  
  <button @click="sendDataToParent">发送数据给父组件</button>  
</template>  
<script>  
export default {  
  methods: {  
    sendDataToParent() {  
      this.$emit('childEvent', 'Hello from child');  
    }  
  }  
};  
</script>  

当点击按钮时,会触发sendDataToParent方法,并使用$emit方法触发名为childEvent的自定义事件,并传递数据'Hello from child'给父组件。

  1. 在父组件中,可以使用v-on指令监听子组件触发的自定义事件,并在事件处理函数中获取子组件传递的数据
html 复制代码
<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方法中获取子组件传递的数据。

相关推荐
骥龙9 分钟前
2.6、Web漏洞挖掘实战(下):XSS、文件上传与逻辑漏洞深度解析
前端·xss
用户66006766853917 分钟前
从 var 到 let/const:JavaScript 变量声明的进化之路
javascript
用户4338453756918 分钟前
Promise深度解析,以及简易版的手写实现
前端
十年_H19 分钟前
Cesium自定义着色器-片元着色器数据来源
javascript·cesium
梦之云20 分钟前
state 状态相关
前端
梦之云24 分钟前
effect 副作用相关
前端
UIUV27 分钟前
var、let 与 const:JavaScript 变量声明的演进与最佳实践
javascript
golang学习记28 分钟前
从0死磕全栈之Next.js 生产环境优化最佳实践
前端
Mintopia1 小时前
🧠 Next.js 还是 Nuxt.js?——当 JavaScript 碰上命运的分叉路
前端·后端·全栈
5pace1 小时前
Mac Nginx安装、启动、简单命令(苍穹外卖、黑马点评前端环境搭建)
java·前端·nginx·macos·tomcat