vue 切换下拉框刷新子组件组件中的信息

要实现vue切换下拉框刷新子组件组件中的信息，可以使用`props`和`watch`来实现组件之间的通信。

首先，在父组件中定义一个`selected`的数据属性，并将其传递给子组件作为`props`。例如：

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      selected: '',
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' }
      ]
    }
  }
}
</script>

在这里，我们将`selected`作为`props`传递给了子组件`ChildComponent`。

然后，在子组件中，可以使用`watch`来监听`selected`的变化，并在变化时更新子组件的数据。例如：

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

<script>
export default {
  props: {
    selected: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      otherInfo: ''
    }
  },
  watch: {
    selected: {
      immediate: true,
      handler(selected) {
        // 根据选中的选项更新子组件的信息
        this.otherInfo = `选项${selected}的信息`
      }
    }
  }
}
</script>

在这里，我们使用了`watch`来监听`selected`的变化，并在变化时更新了子组件的数据。同时，我们设置了`immediate`为`true`，以便在组件初始化时立即执行`handler`函数，从而初始化子组件的数据。

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