父組件
<card />
<card :user="form.user" />
<van-button @click="handleChoice">隨機(jī)</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
