vue3实现props传入的数据跟随变化

Vue 3提供了一种新的办法来实现props传入的数据跟随变化，即使用响应式属性。在Vue 3中，我们可以通过使用`ref`函数将一个普通的数据转换为响应式引用，然后将其作为prop传入子组件中。

首先，在父组件中定义一个`ref`对象，并使用`ref`函数将需要传递的数据转换为响应式引用。然后，将该引用作为prop传递给子组件。

例如，在父组件中定义一个名为`data`的`ref`对象，并将其传递给子组件：

<template>
  <div>
    <ChildComponent :prop-data="data"/>
    <button @click="changeData">Change Data</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  setup() {
    const data = ref('Initial Data');

    const changeData = () => {
      data.value = 'New Data';
    };

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

然后，在子组件中，可以像访问普通变量一样访问props中传入的响应式引用。每当父组件中的数据发生变化时，子组件也会随之更新。

例如，在子组件中直接输出传入的prop数据：

<template>
  <div>
    {{ propData }}
  </div>
</template>

<script>
export default {
  props: {
    propData: {
      type: String,
      required: true
    }
  }
};
</script>

这样，无论何时点击“Change Data”按钮，父组件中的数据都会更新，并相应地更新子组件中的数据。这就实现了props传入的数据跟随变化的效果。