vue 切换下拉框刷新其他组件总的信息

要实现vue切换下拉框刷新其他组件的信息，可以使用vue的事件机制和组件通信。

首先，可以在下拉框的选项改变时触发一个自定义事件，例如：

<template>
  <div>
    <select v-model="selected" @change="onSelectedChange">
      <option v-for="option in options" :value="option.value">{{ option.label }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' }
      ]
    }
  },
  methods: {
    onSelectedChange() {
      this.$emit('selected-change', this.selected)
    }
  }
}
</script>

在这里，我们定义了一个名为`selected-change`的自定义事件，并在下拉框的选项改变时触发。

然后，在其他组件中，可以监听这个自定义事件，并在事件处理函数中更新组件的数据。例如：

<template>
  <div>
    <p>当前选中的选项是：{{ selected }}</p>
    <p>其他组件的信息：{{ otherInfo }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      otherInfo: ''
    }
  },
  mounted() {
    this.$root.$on('selected-change', this.onSelectedChange)
  },
  methods: {
    onSelectedChange(selected) {
      // 根据选中的选项更新其他组件的信息
      this.selected = selected
      this.otherInfo = `选项${selected}的信息`
    }
  },
  destroyed() {
    this.$root.$off('selected-change', this.onSelectedChange)
  }
}
</script>

在这里，我们在组件的`mounted`钩子中监听了`selected-change`事件，并在事件处理函数中更新了组件的数据。同时，在组件销毁时，需要手动移除事件监听，以避免内存泄漏。

通过这种方式，我们就可以实现在vue切换下拉框时刷新其他组件的信息。