vue监听子组件数据变化

在 Vue 中，你可以使用 `$emit` 方法在子组件中触发一个自定义事件，并且传递数据到父组件。在父组件中，你可以使用 `v-on` 指令监听子组件触发的自定义事件，并且更新父组件的数据。

下面是一个简单的例子：

<!-- 子组件 -->
<template>
  <div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
      this.$emit('count-changed', this.count); // 触发自定义事件并传递数据
    },
  },
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <my-component @count-changed="handleCountChanged"></my-component>
    <div>Count: {{ count }}</div>
  </div>
</template>

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

export default {
  components: {
    MyComponent,
  },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    handleCountChanged(newCount) {
      this.count = newCount; // 更新父组件的数据
    },
  },
};
</script>

在这个例子中，子组件 `MyComponent` 有一个状态 `count`，点击按钮后会触发自定义事件 `count-changed` 并传递当前的 `count` 值到父组件。父组件监听 `count-changed` 事件，并且在事件处理函数中更新 `count` 数据，从而实现了监听子组件数据变化的功能。