11.6

src/components/IndicatorSelector.vue

@@ -0,0 +1,35 @@
+<template>
+    <div>
+      <label>选择指标：</label>
+      <select v-model="localValue">
+        <option v-for="ind in indicators" :key="ind" :value="ind">{{ ind }}</option>
+      </select>
+    </div>
+  </template>
+  
+  <script setup>
+import { ref, watch } from "vue";
+
+const props = defineProps({
+  indicators: Array,
+  modelValue: String,
+});
+const emit = defineEmits(["update:modelValue"]);
+
+// 创建本地变量副本
+const localValue = ref(props.modelValue);
+
+// 当父组件传值变化时，同步更新本地变量
+watch(
+  () => props.modelValue,
+  (val) => {
+    localValue.value = val;
+  }
+);
+
+// 当选择变化时，向父组件同步
+watch(localValue, (val) => {
+  emit("update:modelValue", val);
+});
+</script>
+