Vue 是一个广泛使用的前端框架，其核心特性之一就是响应式（Reactivity）系统。当数据变化时，Vue 会自动重新渲染页面，以保证视图与状态的同步。

在某些情况下，我们需要在子组件中监听父组件传递的数据变化。Vue 提供了一个名为 emit 的方法，用于在子组件中触发父组件的事件。在父组件中监听该事件后，即可响应子组件传来的数据变化。

// 子组件示例
Vue.component('child-component', {
  template: `
    

      
{{ message }}
      Update Message
    
  `,
  data() {
    return {
      message: 'Hello'
    }
  },
  methods: {
    updateMessage() {
      this.message = 'Hello from child'
      this.$emit('update:message', this.message)
    }
  }
})

// 父组件示例
new Vue({
  el: '#app',
  data() {
    return {
      parentMessage: ''
    }
  },
  methods: {
    updateParentMessage(message) {
      this.parentMessage = message
    }
  },
  mounted() {
    this.$on('update:message', this.updateParentMessage)
  }
})

在上面代码中，子组件通过 updateMessage 方法更新 message 的值，并通过 this.$emit 触发 update:message 事件，将更新后的 message 值传递给父组件。父组件在 mounted 钩子中使用 this.$on 监听 update:message 事件，并在回调函数中更新 parentMessage 的值。

此时，当子组件中的 message 值发生变化时，父组件会立即同步更新 parentMessage 的值，从而保持视图与状态的同步。