vue3 使用ref如何让子组件直接操作父组件的数据

在Vue3中，可以通过`ref`和`toRef`将父组件的数据传递给子组件，并让子组件直接操作该数据。

首先在父组件中定义一个`ref`，并将其传递给子组件：

<template>
  <div>
    <p>父组件的数据：{{data}}</p>
    <Child :childData="childData" />
  </div>
</template>

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

export default {
  components: {
    Child,
  },
  setup() {
    const data = ref('hello world');
    const childData = toRef(data);

    return {
      data,
      childData,
    };
  },
};
</script>

然后在子组件中接收这个`ref`，并直接修改它：

<template>
  <div>
    <p>子组件的数据：{{childData}}</p>
    <button @click="changeData">修改父组件的数据</button>
  </div>
</template>

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

export default {
  props: {
    childData: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const data = toRef(props.childData);

    const changeData = () => {
      data.value = 'hello vue3';
    };

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

这样子组件就可以直接修改父组件的数据了。值得注意的是，子组件中的`data`必须通过`toRef`转换成普通对象的形式才能修改。