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方法中获取子组件传递的数据。

相关推荐
naice44 分钟前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼1 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin1 小时前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗1 小时前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀6961 小时前
CSS-响应式布局
前端
三小河1 小时前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法1 小时前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku1 小时前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀6961 小时前
2025-35st-w-日常开发总结
前端
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js