使用依赖注入

guonan

2025-04-15 c62099b5f8753bee49c3fca630e9757b7682a6c1

使用依赖注入

 src/views/left/CitySim.vue

@@ -92,17 +92,20 @@
  </div>
</template>
<script setup>
import { reactive, ref, watch } from "vue";
import { reactive, ref, watch, inject } from "vue";
import { initeWaterPrimitiveView } from "@/utils/water";

const emit = defineEmits(["start", "end"]);
function endPlay() {
  emit("end");
}
// 注入父组件提供的方法
const { startSimulate, endSimulate } = inject("simulateActions");

// const emit = defineEmits(["start", "end"]);
// function endPlay() {
//   emit("end");
// }

function startPlay() {
  initeWaterPrimitiveView();
  emit("start");
  startSimulate();
}

const value = ref("");

 src/views/left/KGSim.vue

@@ -35,11 +35,12 @@
        <el-radio label="预测模拟">预测模拟</el-radio>
      </el-radio-group>
      <div v-if="selectedSimulation === '历史模拟'">
        <HistorySimulation
        <!-- <HistorySimulation
          :selectedArea="selectedArea"
          @start="start"
          @end="end"
        />
        /> -->
        <HistorySimulation :selectedArea="selectedArea" />
      </div>
      <div v-if="selectedSimulation === '实时模拟'">
        <RealTimeSimulation :selectedArea="selectedArea" />
@@ -57,16 +58,16 @@
import PredictiveSimulation from "./KGSimOption/PredictiveSimulation.vue";
import RealTimeSimulation from "./KGSimOption/RealTimeSimulation.vue";

const emit = defineEmits(["start", "end"]);
// const emit = defineEmits(["start", "end"]);

function end() {
  emit("end");
}
// function end() {
//   emit("end");
// }

function start() {
  // initeWaterPrimitiveView();
  emit("start");
}
// function start() {
//   // initeWaterPrimitiveView();
//   emit("start");
// }

const selectedSimulation = ref("历史模拟");
const selectedArea = ref("孙胡沟");

 src/views/left/KGSimOption/HistorySimulation.vue

@@ -90,18 +90,20 @@
</template>

<script setup>
import { ref, computed } from "vue";
import { ref, computed, inject } from "vue";
import { ElMessage } from "element-plus";
import { initeWaterPrimitiveView } from "@/utils/water";
const emit = defineEmits(["start", "end"]);
// const emit = defineEmits(["start", "end"]);
const { startSimulate, endSimulate } = inject("simulateActions");

function endPlay() {
  emit("end");
}
// function endPlay() {
//   emit("end");
// }

function startPlay() {
  initeWaterPrimitiveView();
  emit("start");
  // emit("start");
  startSimulate();
}
// 定义 Props
const props = defineProps({

 src/views/left/Simulation.vue

@@ -7,13 +7,16 @@
    @tab-click="handleClick"
  >
    <el-tab-pane label="行政区划仿真" name="first"
      ><city-sim :clickValue="clickValue" @start="start" @end="end"
    /></el-tab-pane>
    <el-tab-pane label="重点区域仿真" name="second"
      ><city-sim :clickValue="clickValue" @start="start" @end="end"
    /></el-tab-pane>
      ><city-sim :clickValue="clickValue" />
      <!-- ><city-sim :clickValue="clickValue" @start="start" @end="end"/> -->
    </el-tab-pane>
    <el-tab-pane label="重点区域仿真" name="second">
      <city-sim :clickValue="clickValue" />
      <!-- <city-sim :clickValue="clickValue" @start="start" @end="end"/> -->
    </el-tab-pane>
    <el-tab-pane label="重点沟仿真" name="third">
      <kg-sim :clickValue="clickValue" @start="start" @end="end" />
      <!-- <kg-sim :clickValue="clickValue" @start="start" @end="end" /> -->
      <kg-sim :clickValue="clickValue" />
    </el-tab-pane>
  </el-tabs>
</template>
@@ -31,15 +34,15 @@
  clickValue.value = tab.props.label;
  console.log(clickValue.value);
};
const emits = defineEmits(["start", "end"]);
// const emits = defineEmits(["start", "end"]);

function start() {
  emits("start");
  console.log("开始模拟");
}
function end() {
  emits("end");
}
// function start() {
//   emits("start");
//   console.log("开始模拟");
// }
// function end() {
//   emits("end");
// }
</script>

<style lang="less" scoped>

 src/views/mnfz.vue

@@ -17,7 +17,7 @@
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { ref, onMounted, onUnmounted, provide } from "vue";
import TimeLine from "@/components/menu/TimeLine.vue";
import Left from "./left/Left.vue";
import echartInfo from "@/components/monifangzhen/echartInfo.vue";
@@ -34,6 +34,12 @@
const isDynamicMode = ref(false);
const isFinish = ref(true);

// 提供方法给所有子组件
provide("simulateActions", {
  startSimulate,
  endSimulate,
});

function startSimulate(form) {
  // console.log("form", form);
  showWaterSimulate.value = true;