vue3父子组件传值（响应式）

父组件

 <card />
    <card :user="form.user" />
    <van-button @click="handleChoice">随机</van-button>


const form = reactive({
  user: {
    name: '阿三',
    job: 'famer',
    info: {
      address: '东大街',
      like: '钓鱼'
    }
  }
})
const handleChoice = () => {
  form.user = {
    name: '张飞',
    job: 'fighting',
    info: {
      address: '桃园',
      like: 'drink'
    }
  }
}

子组件

<template>
  <div>
    <h3>
      <p>{{form.user.name}}</p>
      <p>{{form.user.job}}</p>
      <p>{{form.user.info.address}}</p>
      <p>{{form.user.info.like}}</p>
    </h3>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
const form = defineProps({
  user: {
    type: Object,
    default: () => {
      return {
        name: 'XX',
        job: 'XX',
        info: {
          address: 'XX',
          like: 'XX'
        }
      }
    }
  }
})
</script>

<style lang="scss" scoped></style>

image.png
image.png