vue监听子组件数据变化

在 Vue 中，子组件向父组件传递数据通常是通过触发自定义事件来实现的。在子组件中，可以使用 `$emit` 方法触发一个自定义事件，并且可以传递参数。在父组件中，可以通过 `v-on` 或 `@` 语法来监听这个自定义事件并处理传递过来的数据。

在监听子组件数据变化方面，可以使用 Vue 的 `watch` 监听子组件数据的变化。具体来说，可以在父组件中使用 `watch` 监听子组件的某个属性，当该属性发生变化时会触发相应的回调函数。下面是一个示例代码：

<!-- 子组件 -->
<template>
  <div>
    <!-- 子组件中的数据 -->
    <p>{{ message }}</p>
    <button @click="updateMessage">更新数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    updateMessage() {
      this.message = 'Hello Vue!'
      // 触发自定义事件，并传递参数
      this.$emit('message-changed', this.message)
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <!-- 父组件中监听子组件数据变化 -->
    <p>监听子组件数据变化：{{ childMessage }}</p>
    <!-- 子组件 -->
    <child-component @message-changed="onMessageChanged"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childMessage: ''
    }
  },
  methods: {
    onMessageChanged(message) {
      // 子组件数据变化时触发的回调函数
      this.childMessage = message
    }
  },
  watch: {
    childMessage(newVal, oldVal) {
      // 监听子组件数据变化
      console.log(`子组件数据变化：${oldVal} -> ${newVal}`)
    }
  }
}
</script>

在上面的示例代码中，子组件中的数据 `message` 发生变化时会触发自定义事件 `message-changed`，并且会将 `message` 的值作为参数传递给父组件。在父组件中，使用 `v-on` 或 `@` 语法监听该自定义事件，并在回调函数中处理传递过来的数据。同时，通过 `watch` 监听子组件数据 `childMessage` 的变化，并在回调函数中处理变化后的数据。