vue 父组件监听子组件属性变化

在 Vue 中，父组件可以通过 `v-bind` 绑定子组件的属性，从而监听子组件属性的变化。具体实现方式如下：

1. 在子组件中定义需要监听的属性，并在该属性值发生变化时触发自定义事件：

// 子组件
<template>
  <div>
    <input v-model="message">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  watch: {
    message(newVal) {
      this.$emit('message-change', newVal)
    }
  }
}
</script>

2. 在父组件中使用子组件时，通过 `v-bind` 绑定子组件的属性，并在父组件中监听子组件自定义事件：

// 父组件
<template>
  <div>
    <child-component v-bind:message="parentMessage" v-on:message-change="onMessageChange"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: ''
    }
  },
  methods: {
    onMessageChange(newVal) {
      this.parentMessage = newVal
    }
  }
}
</script>

这样，当子组件中的 `message` 属性发生变化时，会触发自定义事件 `message-change`，父组件中的 `onMessageChange` 方法会被调用，从而实现了父组件监听子组件属性变化的功能。