vue3 state传参

在 Vue 3 中，可以使用 `reactive` 函数来创建响应式对象，这个函数接收一个普通的 JavaScript 对象作为参数，并返回一个响应式的 Proxy 对象。在组件中，可以通过 `setup` 函数中的 `ref` 或 `reactive` 函数来创建响应式数据。

如果要在一个组件中将响应式数据传递给另一个组件，可以将其作为属性传递。在父组件中，可以使用 `props` 来声明传递给子组件的属性。在子组件中，可以使用 `setup` 函数中的 `props` 对象来访问这些属性。

下面是一个简单的示例：

<template>
  <div>
    <child-component :my-state="myState"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const myState = reactive({
      count: 0,
    });

    return {
      myState,
    };
  },
};
</script>

在子组件中，可以通过 `props` 访问父组件传递的 `my-state` 属性：

<template>
  <div>
    <p>Count: {{ myState.count }}</p>
  </div>
</template>

<script>
export default {
  props: ['myState'],
};
</script>

这样，在父组件中更新 `myState` 对象的属性时，子组件中的数据也会自动更新。