Vue 在当前组件里读取另外一个组件的数据

如果要在当前组件里读取另外一个组件的数据，可以使用 Vue 的 props 和 $emit。通过 props，可以将数据从父组件传递给子组件；通过 $emit，可以将事件从子组件传递给父组件。

例如，在父组件中定义一个数据：

<template>
  <div>
    <child :my-data="myData"></child>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      myData: 'Hello World'
    }
  }
}
</script>

然后在子组件中，通过 props 接收父组件传递过来的数据：

<template>
  <div>
    {{ myData }}
  </div>
</template>

<script>
export default {
  props: {
    myData: {
      type: String,
      default: ''
    }
  }
}
</script>

这样就可以在子组件中读取父组件传递过来的数据了。

如果要在子组件中修改父组件的数据，可以通过 $emit 来触发一个事件，然后在父组件中监听这个事件，从而修改数据。例如：

// 子组件
<template>
  <div>
    <button @click="updateMyData">Update My Data</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateMyData() {
      this.$emit('update-my-data', 'New Data')
    }
  }
}
</script>


// 父组件
<template>
  <div>
    <child :my-data="myData" @update-my-data="onUpdateMyData"></child>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      myData: 'Hello World'
    }
  },
  methods: {
    onUpdateMyData(newData) {
      this.myData = newData
    }
  }
}
</script>

在子组件中，通过 $emit 触发了一个名为 "update-my-data" 的事件，并传递了一个新的数据 "New Data"。在父组件中，使用 @update-my-data 监听了这个事件，并在 onUpdateMyData 方法中将 myData 的值更新为新的数据。这样就实现了在子组件中修改父组件的数据。