vue3把ref的值传给子组件

在 Vue 3 中，`ref` 是一个响应式引用的概念，它允许你创建一个响应式的引用值，这个值可以是基本数据类型或者复杂对象。如果你想要将一个 `ref` 的值传递给子组件，你可以直接将这个 `ref` 作为属性传递给子组件。由于 Vue 3 的响应式系统使用的是 Proxy，所以传递给子组件的 `ref` 仍然是响应式的。

以下是一个例子，展示了如何将父组件中的 `ref` 值传递给子组件：

父组件：

<template>
  <div>
    <child-component :my-ref="myRef"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  setup() {
    const myRef = ref('这是一个值');

    return {
      myRef
    };
  }
};
</script>

子组件：

<template>
  <div>子组件接收到的值：{{ myRef }}</div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    myRef: String
  }
});
</script>

在这个例子中，父组件创建了一个 `ref` 变量 `myRef` 并且将其传递给了子组件作为 `my-ref` 属性。子组件通过声明 `props` 中的 `myRef` 来接收这个值，并且由于 Vue 3 的响应式特性，如果在父组件中 `myRef` 的值发生了变化，子组件接收到的值也会相应地更新。