vue3中vue页面向组件传值(组件的引入)

 // vue页面的操作
 // vue页面中引入组件；组件放入components文件夹中
 import pension from "@/components/CarWenShidu/echart.vue";
 import pensionshidu from "@/components/CarWenShidu/echartshidu.vue";
 
 // 向组件中传值 handleMethod 通过datecode进行赋值
 <div><el-tag type="primary">车厢温度变化曲线</el-tag><pension :handleMethod ="datecode"/></div>
 
 // 引入js接口api
import { listcode, getWenshidu, delWenshidu, addWenshidu, updateWenshidu } from "@/api/system/wenshidu";

// vue页面中调用接口传值
function getList() {
  loading.value = true;
  listcode(queryParams.value).then(response => {
    wenshiduList.value = response.rows;
    datecode.value = response.data
    console.log(datecode.value)
    console.log(response.data)
    total.value = response.total;
    loading.value = false;
  });

//组件数据的接收
let wenducode = defineProps(['handleMethod'])
const showH1= false;
// 获取使用传入的数值
<h1 v-if="showH1">{{ wenducode }}</h1>
//数据的赋值
Data1.value = wenducode.handleMethod.wendu01;
            Data2.value = wenducode.handleMethod.wendu02;
            Data3.value = wenducode.handleMethod.wendu03;

//完整代码示例
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="auto">
      <el-form-item label="车辆信息编码" prop="carCodeNumber">
        <el-input
          v-model="queryParams.carCodeNumber"
          placeholder="请输入车辆信息编码"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="车厢温度记录时间" prop="carBoxWenduTime">
        <el-date-picker clearable
          v-model="queryParams.carBoxWenduTime"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择车厢温度记录时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 添加或修改车厢信息温度，湿度对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="wenshiduRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="车辆信息编码" prop="carCodeNumber">
          <el-input v-model="form.carCodeNumber" placeholder="请输入车辆信息编码" />
        </el-form-item>
        <el-form-item label="车厢温度记录时间" prop="carBoxWenduTime">
          <el-date-picker clearable
            v-model="form.carBoxWenduTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择车厢温度记录时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
        <div class="dialog-footer">
      <div ref = "chart" style="width: 1000px; height: 400px;"></div>
    </div>
      </template>
    </el-dialog>
    <div><el-tag type="primary">车厢温度变化曲线</el-tag><pension :handleMethod="datecode"/></div>
    <div><el-tag type="primary">车厢湿度变化曲线</el-tag><pensionshidu/></div>
  </div>
</template>

<script setup name="Wenshidu">
import { listcode, getWenshidu, delWenshidu, addWenshidu, updateWenshidu } from "@/api/system/wenshidu";
import pension from "@/components/CarWenShidu/echart.vue";
import pensionshidu from "@/components/CarWenShidu/echartshidu.vue";




const { proxy } = getCurrentInstance();
let datecode = ref() ;//定义变量传值给组件
 const wenshiduList = ref([123]);
 const open = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
 const ids = ref([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
 
 const data = reactive({
   form: {},
   queryParams: {
     pageNum: 1,
     pageSize: 10,
     carCodeNumber: null,
     carBoxWenduTime: null,
     carBoxWendu1: null,
     carBoxWendu2: null,
     carBoxWendu3: null,
     carBoxWendu4: null,
     carBoxWendu5: null,
     carBoxWendu6: null,
     carBoxWendu7: null,
     carBoxWendu8: null,
     carBoxShidu1: null,
     carBoxShidu2: null,
     carBoxShidu3: null,
     carBoxShidu4: null,
     carBoxShidu5: null,
     carBoxShidu6: null,
     carBoxShidu7: null,
     carBoxShidu8: null,
     companyId: null,
     deptId: null,
     createUserId: null,
     updateUserId: null,
   },
   rules: {
   }
 });
 
 const { queryParams, form, rules } = toRefs(data);
 
 /** 查询车厢信息温度，湿度列表 */
 function getList() {
   loading.value = true;
   listcode(queryParams.value).then(response => {
     wenshiduList.value = response.rows;
     datecode.value = response.data
     total.value = response.total;
     loading.value = false;
   });
 }
 
 // 取消按钮
 function cancel() {
   open.value = false;
   reset();
 }
 
 // 表单重置
 function reset() {
   form.value = {
     carCodeNumber: null,
     carBoxWenduTime: null,
     carBoxWendu1: null,
     carBoxWendu2: null,
     carBoxWendu3: null,
     carBoxWendu4: null,
     carBoxWendu5: null,
     carBoxWendu6: null,
     carBoxWendu7: null,
     carBoxWendu8: null,
     carBoxShidu1: null,
     carBoxShidu2: null,
     carBoxShidu3: null,
     carBoxShidu4: null,
     carBoxShidu5: null,
     carBoxShidu6: null,
     carBoxShidu7: null,
     carBoxShidu8: null,
     objId: null,
     companyId: null,
     deptId: null,
     createUserId: null,
     createTime: null,
     updateUserId: null,
     updateTime: null,
     delFlag: null
   };
   proxy.resetForm("wenshiduRef");
 }
 
 /** 搜索按钮操作 */
 function handleQuery() {
   queryParams.value.pageNum = 1;
   getList();
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
 }
 
 // 多选框选中数据
 function handleSelectionChange(selection) {
   ids.value = selection.map(item => item.objId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
 }
 
 /** 新增按钮操作 */
 function handleAdd() {
   reset();
   open.value = true;
   title.value = "添加车厢信息温度，湿度";
 }
 
 /** 修改按钮操作 */
 function handleUpdate(row) {
   reset();
   const _objId = row.objId || ids.value
   getWenshidu(_objId).then(response => {
     form.value = response.data;
     open.value = true;
     title.value = "修改车厢信息温度，湿度";
   });
 }
 
 /** 提交按钮 */
 function submitForm() {
   proxy.$refs["wenshiduRef"].validate(valid => {
     if (valid) {
       if (form.value.objId != null) {
         updateWenshidu(form.value).then(response => {
           proxy.$modal.msgSuccess("修改成功");
           open.value = false;
           getList();
         });
       } else {
         addWenshidu(form.value).then(response => {
           proxy.$modal.msgSuccess("新增成功");
           open.value = false;
           getList();
         });
       }
     }
   });
 }
 
 /** 删除按钮操作 */
 function handleDelete(row) {
   const _objIds = row.objId || ids.value;
   proxy.$modal.confirm('是否确认删除车厢信息温度，湿度编号为"' + _objIds + '"的数据项？').then(function() {
     return delWenshidu(_objIds);
   }).then(() => {
     getList();
     proxy.$modal.msgSuccess("删除成功");
   }).catch(() => {});
 }
 
 /** 导出按钮操作 */
 function handleExport() {
   proxy.download('mqtts/wenshidu/export', {
     ...queryParams.value
   }, `wenshidu_${new Date().getTime()}.xlsx`)
 }
 
 getList();
 </script>
 
 
 //组件代码
 <template>
   <div class="dialog-footer">
   <div ref="chart" style="width: 1000px; height: 400px;"> </div>
   <h1 v-if="showH1">{{ wenducode }}</h1>
   </div>
   </template>
 
   <script setup>
     import { listcode } from "@/api/system/wenshidu";
             import { ref, onMounted, reactive, watchEffect } from "vue";
             import * as echarts from "echarts";
 
             let constres = reactive([]);
             const chart = ref();
             const axisData = ['1 号车厢温度', '2 号车厢温度', '3 号车厢温度', '4 号车厢温度', '5 号车厢温度', '6 号车厢温度', '7 号车厢温度', '8 号车厢温度'];
             //let xData = ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45'];
             let Data1 = ref([]);
             let Data2 = ref([]);
             let Data3 = ref([]);
             let Data4 = ref([]);
             let Data5 = ref([]);
             let Data6 = ref([]);
             let Data7 = ref([]);
             let Data8 = ref([]);
             let xData = ref([]);
             let echart=null
             const showH1= false;
　　　　　　　　// 获取vue文件传入组件的值
             let wenducode = defineProps(['handleMethod'])
             const lineChart = () => {}
             // 基于 dom,初始化 echarts 实例
 
             // 绘制图表
             // watchEffect(() => {
             listcode().then(response => {
             Data1.value = wenducode.handleMethod.wendu01;
             Data2.value = wenducode.handleMethod.wendu02;
             Data3.value = wenducode.handleMethod.wendu03;
             Data4.value = wenducode.handleMethod.wendu04;
             Data5.value = wenducode.handleMethod.wendu05;
             Data6.value = wenducode.handleMethod.wendu06;
             Data7.value = wenducode.handleMethod.wendu07;
             Data8.value = wenducode.handleMethod.wendu08;
             xData.value = wenducode.handleMethod.xData;
 
             // 添加在这里
             console.log(Data1.value);
             // console.log(response);
             echart.setOption({
             // title: {
             //   text: '车厢温度变化',
             //   size:'1px'
             // },
             tooltip: {
             trigger: 'axis'
             },
             legend: {
             data: axisData
             },
             grid: {
             left: '3%',
             right: '4%',
             bottom: '3%',
             containLabel: true
             },
             toolbox: {
             feature: {
             saveAsImage: {}
             }
             },
             xAxis: {
             type: 'category',
             boundaryGap: false,
             data: xData.value
             },
             yAxis: {
             type: 'value',
             axisLabel: {
             formatter: '{value} °C'
             }
             },
 
             series: [
 
             {
             name: '1 号车厢温度',
             type: 'line',
             smooth: true, // 开启平滑过度
             emphasis: { // 高亮选择
             focus: "serice"
             },
             data: Data1.value
             },
             {
             name: '2 号车厢温度',
             type: 'line',
             smooth: true, // 开启平滑过度
             emphasis: { // 高亮选择
             focus: "serice"
             },
             data: Data2.value
             },
             {
             name: '3 号车厢温度',
             type: 'line',
             smooth: true, // 开启平滑过度
             emphasis: { // 高亮选择
             focus: "serice"
             },
             data: Data3.value
             },
             {
             name: '4 号车厢温度',
             type: 'line',
             smooth: true, // 开启平滑过度
             emphasis: { // 高亮选择
             focus: "serice"
             },
             data: Data4.value
             },
             {
             name: '5 号车厢温度',
             type: 'line',
             smooth: true, // 开启平滑过度
             emphasis: { // 高亮选择
             focus: "serice"
             },
             data: Data5.value
             },
             {
             name: '6 号车厢温度',
             type: 'line',
             smooth: true, // 开启平滑过度
             emphasis: { // 高亮选择
             focus: "serice"
             },
             data: Data6.value
             },
             {
             name: '7 号车厢温度',
             type: 'line',
             smooth: true, // 开启平滑过度
             emphasis: { // 高亮选择
             focus: "serice"
             },
             data: Data7.value
             },
             {
             name: '8 号车厢温度',
             type: 'line',
             smooth: true, // 开启平滑过度
             emphasis: { // 高亮选择
             focus: "serice"
             },
             data: Data8.value
             }
             ]
             },true);
             });
   onMounted(()=>{
      echart = echarts.init(chart.value);
     lineChart()
   })
   window.onresize = function () {
    echart.resize();
 };
   // listcode();
   // Data1 = reactive([1,5,6])
   </script>
   <style scoped></styl