组件监听父级中的数据

// 父组件
<template>
  <div>
    <child-component :data="parentData"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentData: '父组件数据'
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <p>{{ data }}</p>
  </div>
</template>

<script>
export default {
  props: ['data']
}
</script>

// 父组件
<template>
  <div>
    <button @click="updateParentData">更新父组件数据</button>
    <child-component @update-child-data="updateChildData"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentData: '父组件数据'
    }
  },
  methods: {
    updateParentData() {
      this.parentData = '更新后的父组件数据';
    },
    updateChildData(childData) {
      console.log('子组件传递的数据：', childData);
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <button @click="updateChildData">更新子组件数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateChildData() {
      const childData = '子组件数据';
      this.$emit('update-child-data', childData);
    }
  }
}
</script>