uniapp父子如何传递对象

在uni-app中，可以通过props进行父子组件之间的数据传递，包括传递对象。

1. 父组件传递对象给子组件：

在父组件中，可以通过props将对象传递给子组件，示例代码如下：

<!-- 父组件 -->
<template>
  <div>
    <child :obj="myObj"></child>
  </div>
</template>
<script>
  import child from './components/child.vue'
  export default {
    components: {
      child
    },
    data () {
      return {
        myObj: {
          name: '张三',
          age: 18
        }
      }
    }
  }
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>姓名：{{obj.name}}</p>
    <p>年龄：{{obj.age}}</p>
  </div>
</template>
<script>
  export default {
    props: {
      obj: {
        type: Object,
        default: () => {}
      }
    }
  }
</script>

2. 子组件传递对象给父组件：

在子组件中，可以通过$emit事件将对象传递给父组件，示例代码如下：

<!-- 父组件 -->
<template>
  <div>
    <p>姓名：{{myObj.name}}</p>
    <p>年龄：{{myObj.age}}</p>
    <child @getObj="handleGetObj"></child>
  </div>
</template>
<script>
  import child from './components/child.vue'
  export default {
    components: {
      child
    },
    data () {
      return {
        myObj: {}
      }
    },
    methods: {
      handleGetObj (obj) {
        this.myObj = obj
      }
    }
  }
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="handleClick">传递对象</button>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        obj: {
          name: '李四',
          age: 20
        }
      }
    },
    methods: {
      handleClick () {
        this.$emit('getObj', this.obj)
      }
    }
  }
</script>

这样就完成了uni-app父子组件之间的对象传递。