vue2.7 <script setup> 使用 透传属性，怎么用

在 Vue 2.7 中，`<script setup>` 特性引入了更简洁的组件编写方式，其中包含 `ref` 和 `reactive` 等用于状态管理的新语法。如果你想通过`<script setup>`传递值到模板上，并保持其在组件间的“穿透”（即父子组件间的通信），你可以这样做：

1. **直接注入**: 如果你想将一个简单的值从父组件传递给子组件，你可以使用`v-bind`或`props`标签：

<!-- 父组件 -->
<template>
  <child-component :myProp="parentValue" />
</template>

<script setup>
import { ref } from 'vue'
const parentValue = ref('Hello, World')
</script>

<!-- 子组件 -->
<template>
  <div>{{ myProp }}</div>
</template>

<script setup>
export default {
  props: ['myProp']
}
</script>

2. **响应式对象**: 如果你需要更复杂的对象或数组，可以使用`reactive`创建响应式对象，它同样会被自动地穿透：

<!-- 父组件 -->
<template>
  <child-component :myObject="parentObject" />
</template>

<script setup>
import { reactive } from 'vue'
const parentObject = reactive({ name: 'John', age: 30 })
</script>

<!-- 子组件 -->
<template>
  <div>Name: {{ myObject.name }} | Age: {{ myObject.age }}</div>
</template>

<script setup>
export default {
  props: ['myObject']
}
</script>

记得在子组件中使用点`.`访问属性，因为`<script setup>`不会像常规`methods`那样自动导出对象的方法。