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 分钟前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'11 分钟前
css `dorp-shadow`
前端·css
流***陌19 分钟前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序
可触的未来,发芽的智生29 分钟前
新奇特:黑猫警长的纳米世界,忆阻器与神经网络的智慧
javascript·人工智能·python·神经网络·架构
烛阴1 小时前
用 Python 揭秘 IP 地址背后的地理位置和信息
前端·python
前端开发爱好者1 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
why技术1 小时前
从18w到1600w播放量,我的一点思考。
java·前端·后端
欧阳呀1 小时前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui
清风徐来QCQ1 小时前
css总结
前端
天***88962 小时前
js封装一个双精度算法实现
开发语言·前端·javascript