vue2.0当前组件获取另一个组件更新的数据

在 Vue2.0 中，组件之间的通信有多种方式。其中一种常用的方式是通过 props 和 emit 实现父子组件之间的通信。如果需要获取另一个组件更新的数据，可以采用以下两种方式：

1. 使用 $refs 属性

在父组件中，可以通过给子组件设置 ref 属性来获取子组件实例。然后通过调用子组件实例的方法或访问子组件实例的属性来获取子组件中的数据。

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="getChildData">获取子组件数据</button>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    getChildData() {
      const childData = this.$refs.child.childData
      console.log(childData)
    }
  }
}
</script>

在子组件中，需要将需要获取的数据设置为子组件实例的属性。

<template>
  <div>
    <input type="text" v-model="childData">
  </div>
</template>

<script>
export default {
  data() {
    return {
      childData: ''
    }
  }
}
</script>

2. 使用事件总线

在 Vue2.0 中，可以通过创建一个事件总线来实现组件之间的通信。在父组件中创建一个事件总线实例，然后在子组件中触发事件，最后在父组件中监听事件并获取数据。

<template>
  <div>
    <child-component></child-component>
    <button @click="getChildData">获取子组件数据</button>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    getChildData() {
      const childData = EventBus.$data.childData
      console.log(childData)
    }
  }
}
</script>

在子组件中，需要在需要更新的数据发生变化时触发事件。

<template>
  <div>
    <input type="text" v-model="childData" @change="updateData">
  </div>
</template>

<script>
import EventBus from './EventBus'

export default {
  data() {
    return {
      childData: ''
    }
  },
  methods: {
    updateData() {
      EventBus.$data.childData = this.childData
      EventBus.$emit('childDataUpdated')
    }
  }
}
</script>

在事件总线中，需要创建一个 Vue 实例并导出。然后在需要监听事件的组件中，通过引入事件总线并监听事件来获取数据。

import Vue from 'vue'

const EventBus = new Vue()

export default EventBus

注意：以上两种方式都是通过引用组件实例来获取数据。如果需要在非父子组件之间进行通信，可以使用 Vuex 状态管理或者使用事件总线实现。