vue父组件监听子组件的数据

在Vue中，父组件可以通过props属性来监听子组件的数据。具体步骤如下：

1. 在父组件中，在子组件标签上使用v-bind或简写冒号（:），将父组件的数据传递给子组件。例如：

<template>
  <div>
    <child-component :childData="parentData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentData: '父组件数据',
    };
  },
};
</script>

2. 在子组件中，通过props接收父组件传递的数据。例如：

<template>
  <div>
    <p>{{ childData }}</p>
  </div>
</template>

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

这样，父组件的数据会被传递给子组件，并且在子组件中可以直接使用。当父组件的数据发生变化时，子组件也会相应地更新。