子组件监听父组件的数据，并且子组件向父组件传值

子组件监听父组件的数据可以使用Vue.js提供的watch属性，具体实现步骤如下：
1.在子组件中使用props接收父组件传递的数据。
2.在子组件中使用watch监听props中数据的变化。
3.在watch的回调函数中处理数据变化后的逻辑。

子组件向父组件传值可以使用自定义事件，具体实现步骤如下：
1.在子组件中使用$emit触发自定义事件，并传递需要传递的数据。
2.在父组件中使用v-on监听子组件触发的自定义事件。
3.在监听函数中处理子组件传递的数据。

下面是一个示例代码，演示了如何在Vue.js中实现子组件监听父组件的数据，并且子组件向父组件传值：

<!-- 父组件 -->
<template>
  <div>
    <p>父组件数据：{{ message }}</p>
    <<son :message="message" @update="handleUpdate"></son>
  </div>
</template>

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

export default {
  components: {
    Son
  },
  data() {
    return {
      message: 'Hello World'
    }
  },
  methods: {
    handleUpdate(value) {
      this.message = value
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>子组件数据：{{ localMessage }}</p>
    <button @click="handleClick">向父组件传值</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  data() {
    return {
      localMessage: this.message
    }
  },
  watch: {
    message(newValue) {
      this.localMessage = newValue
    }
  },
  methods: {
    handleClick() {
      this.$emit('update', 'Hello Parent')
    }
  }
}
</script>