vue3 setup 语法糖 父组件给子组件传对象值

在vue3的 `setup()` 中，可以使用 `ref` 和 `reactive` 来创建响应式数据。如果要将对象传递给子组件，可以使用 `props` 来接收父组件传递过来的对象，然后将其赋值给子组件的响应式数据。

以下是一个示例：

父组件：

<template>
  <child-component :objProp="obj"></child-component>
</template>

<script>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    const obj = ref({ name: 'John', age: 20 })

    return {
      obj
    }
  }
}
</script>

子组件：

<template>
  <div>{{ objProp }}</div>
</template>

<script>
import { defineProps } from 'vue'

export default {
  props: {
    objProp: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const obj = props.objProp

    return {
      obj
    }
  }
}
</script>

在子组件的 `setup()` 中，使用 `defineProps()` 来定义接收的 props，然后将其赋值给子组件的响应式数据。这样，在父组件中修改 `obj` 的值时，子组件也会相应地更新。