uniapp如何自定义组件方法和父子组件相互传值的用法和示例代码

知码客

于 2025-03-28 22:08:27 发布

阅读量818

点赞数 8

分类专栏：企业小程序开发文章标签： uni-app 前端 javascript 商城小程序开发微信小程序小程序开发

本文链接：https://blog.csdn.net/qq_19448821/article/details/146612597

版权

如何在UniApp中自定义组件以及父子组件之间的数据传递。我们将创建一个父组件 ParentComponent.vue 和一个子组件 ChildComponent.vue，并实现父子组件之间的数据传递。

父组件 `ParentComponent.vue`

<!-- ParentComponent.vue -->
<template>
  <view class="parent">
    <text>父组件数据: {
  { parentMessage }}</text>
    <!-- 子组件调用，传递props -->
    <ChildComponent 
      :initialMsg="parentMessage" 
      @child-event="handleChildEvent"
    ></ChildComponent>
  </view>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue'  // 引入子组件

export default {
     
  components: {
     
    ChildComponent  // 注册子组件
  },
  data() {
     
    return {
     
      parentMessage: '来自父组件的初始数据'
    }
  },
  methods: {
     
    handleChildEvent(childData) {
     
      // 处理子组件传递的数据
      this.parentMessage = childData
      console.log('父组件收到子组件数据:', childData)
    }