vue 兄弟传值

已于 2023-04-13 13:47:46 修改
阅读量475 收藏
点赞数 2
分类专栏： vue  elementui 文章标签： vue.js javascript 前端
于 2023-04-13 13:47:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CMDN123456/article/details/130128288
版权

使用bus

1. 创建一个公共js,然后在main.js中引用

// vueBus.js
import Bus from 'vue';
let install = function (Vue) {
  Vue.prototype.$bus = new Bus()
}
export default { install };

 

 2.直接在页面使用

A页面发送，B页面接收

A页面：

//step 与B页面要用的“参数”一致。
this.$bus.$emit("step", {
          step: "monthCheck", //路由名称
          data: {
            //发送的数据
            equipmentData: this.equipmentData,
            ClickIdsList: ClickIdsListlength,
            equipmentTable: datasDetail,
          },
        });

B页面 接收，并销毁

data() {
    return {
      activeName: "first",  //页面默认打开第一页
      step: "1",
      equipTableData: {},
    };
  },
mounted() {
    //在此组件想接收数据，定义this.$bus.$on和this.$bus.$off
    //接收路由传过来的数据
    this.$bus.$on("step", (data) => {
      this.step = data.step;
      if (data.data) {
        this.equipTableData = data.data;
      }
    });
  },
  destroyed() {
    //解绑当前组件所用的事件
    this.$bus.$off("step");
  },

简述

//发送
this.$bus.$emit('updateShowSide', false)
 
//接收
this.$bus.$on('updateShowSide', （data ）=> {
        this.showSide = data
    })
 
//销毁
 this.$bus.$off("updateShowSide");

下面的可以不用看，下面是记录自己写的页面。

完整代码：

B页面

<template>
  <div
    class="dyc30_Index"
    animated
  >
    <!-- @tab-click="handleClick" -->
    <el-tabs
      v-model="activeName"
      class="tabsStyle"
      :before-leave="beforeHandle"
    >
      <el-tab-pane
        label="yyds-30型_电源车周维护"
        style="height: 100%; width: 100%"
        name="first"
      >
        <indexSs title="周维护">
          <!-- 具名插槽的写法一 -->
          <template slot="one">
            <dyc30_WeekyMainten
              v-if="step == '1'"
              class="cs02"
              :data="equipTableData"
            />
            <dyc30_weeklyCheck
              v-if="step == 'weeklyCheck'"
              :data="equipTableData"
            />
            <dyc30_weeklyGZ
              v-if="step == 'weeklyGZ'"
              :data="equipTableData"
            />
          </template>
        </indexSs>
      </el-tab-pane>

      <el-tab-pane
        label="yyds-30型_电源车月维护"
        style="height: 100%; width: 100%"
        name="second"
      >
        <indexSs title="月维护">

          <template slot="one">
            <dyc30Month
              v-if="step == '1'"
              class="cs02"
              :data="equipTableData"
            />
            <dyc30monthCheck
              v-if="step == 'monthCheck'"
              :data="equipTableData"
            />
            <dyc30monthGZ
              v-if="step == 'monthGZ'"
              :data="equipTableData"
            />
          </template>
        </indexSs>
      </el-tab-pane>

      <el-tab-pane
        label="yyds-30型_电源车季维护"
        style="height: 100%; width: 100%"
        name="third"
      >
        <indexSs title="季维护">

          <template slot="one">
            <dyc30Quarter
              v-if="step == '1'"
              class="cs02"
              :data="equipTableData"
            />
            <dyc30quarterCheck
              v-if="step == 'quarterCheck'"
              :data="equipTableData"
            />
            <dyc30quarterGZ
              v-if="step == 'quarterGZ'"
              :data="equipTableData"
            />
          </template>
        </indexSs>
      </el-tab-pane>

      <el-tab-pane
        label="YYSD-3型_年维护"
        style="height: 100%; width: 100%"
        name="fourth"
      >
        <indexSs title="年维护">

          <template slot="one">
            <dyc30Year
              v-if="step == '1'"
              class="cs02"
              :data="equipTableData"
            />
            <dyc30yearCheck
              v-if="step == 'yearCheck'"
              :data="equipTableData"
            />
            <dyc30yearGZ
              v-if="step == 'yearGZ'"
              :data="equipTableData"
            />
          </template>
        </indexSs>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
//周;
import dyc30_WeekyMainten from "./dyc30_WeekyMainten.vue";
import dyc30_weeklyCheck from "../../DetailTable/weeklys/dyc30_weeklyCheck.vue";
import dyc30_weeklyGZ from "../../DetailTable/weeklys/dyc30_weeklyGZ.vue";

//月
import dyc30Month from "./dyc30Month.vue";
import dyc30monthCheck from "../../DetailTable/months/dyc30monthCheck.vue";
import dyc30monthGZ from "../../DetailTable/months/dyc30monthGZ.vue";

//季度
import dyc30Quarter from "./dyc30Quarter.vue";
import dyc30quarterCheck from "../../DetailTable/quarter/dyc30quarterCheck.vue";
import dyc30quarterGZ from "../../DetailTable/quarter/dyc30quarterGZ.vue";

//年度
import dyc30Year from "./dyc30Year.vue";
import dyc30yearCheck from "../../DetailTable/year/dyc30yearCheck.vue";
import dyc30yearGZ from "../../DetailTable/year/dyc30yearGZ.vue";

import indexSs from "../indexSs.vue";
import { Notify } from "vant";
export default {
  // inject: ["reload"],
  data() {
    return {
      activeName: "first",
      step: "1",
      equipTableData: {},
    };
  },
  components: {
    dyc30_WeekyMainten,
    indexSs,
    dyc30_weeklyCheck,
    dyc30_weeklyGZ,
    //月
    dyc30Month,
    dyc30monthCheck,
    dyc30monthGZ,
    //季度
    dyc30Quarter,
    dyc30quarterCheck,
    dyc30quarterGZ,
    //年度
    dyc30Year,
    dyc30yearCheck,
    dyc30yearGZ,
  },

  beforeCreate() {
    console.log("dyc30_选择型号后进来===", this.$route.params.data);
  }, //生命周期 - 创建之前
  created() {
    this.equipTableData.modelID = this.$route.params.data;
  },
  watch: {},
  mounted() {
    //在此组件想接收数据，定义this.$bus.$on和this.$bus.$off
    //接收路由传过来的数据
    this.$bus.$on("step", (data) => {
      this.step = data.step;
      if (data.data) {
        this.equipTableData = data.data;
      }
    });
  },
  destroyed() {
    //解绑当前组件所用的事件
    this.$bus.$off("step");
  },
  methods: {
    /**在下一步的页面中，不能切换选项卡 */
    beforeHandle() {
      if (this.step != 1) {
        Notify({ type: "danger", message: "请先完成当前维护登记" });
        return false;
      }
    },
  },
};
</script>
<style scoped>
.dyc30_Index {
  /* background-color: #eaecf2; */
  background: url("../../../assets/imgList/WeiHuBG.png") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  position: fixed;
}
.tabsStyle {
  height: 100%;
}

::v-deep .el-tabs__nav {
  float: none;
}
/**选中的变色 */
::v-deep .el-tabs__item.is-active {
  color: #fff;
  background: linear-gradient(#237df5, #018ff2, #06b7f7);
}
::v-deep .el-tabs__item {
  padding: 0% 0%;
  width: 17%;
  box-sizing: border-box;
  display: inline-block;
  list-style: none;
  position: relative;
  border-radius: 39px;
  margin: 1%;
  background-color: #fff;
  color: #31478f;
  box-shadow: 1px 2px 3px 4px #f4f4f4;
}

::v-deep .el-tabs__header {
  height: 8%;
}
::v-deep .el-tabs__content {
  height: 90%;
}

.tabsStyle >>> .el-tabs__active-bar {
  width: 0 !important;
}
/**添加切换动画 */
.cs02 {
  animation: fadeInLeft 1.5s 0.02s ease backwards;
}
</style>

这里面用到了插槽，插槽页：

<template>
  <div
    class="indexSs"
    style="height: 100%; width: 100%"
  >
    <slot name="one"></slot>
  </div>
</template>
<script>
import preventBack from "vue-prevent-browser-back"; //阻止返回

export default {
  name: "indexSs",
  data() {
    return {};
  },
  mixins: [preventBack], //注入  阻止返回上一页

  components: {},
};
</script>

A页面：

<template>
  <div class="dyc30Month">
    <el-row style="height: 7%">
      <p class="textStyle">月维查卡</p>
    </el-row>

    <el-row style="height: 90%">
      <el-row
        :gutter="15"
        v-model="equipmentData"
        style="display: flex; height: 9%"
      >
        <el-col :span="2"></el-col>
        <el-col :span="10">
          <div class="inputname">检查时间</div>
          <el-date-picker
            v-model="equipmentData.checkData"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="10">
          <div class="inputname">装备编号</div>
          <el-input
            placeholder="点击选择"
            readonly
            v-model="equipmentData.code.name"
            @focus="inputClick('装备编号')"
          >
          </el-input>
        </el-col>
      </el-row>

      <el-row style="height: 75%; padding: 0 4%">
        <span class="titleStyle">基本数据</span>
        <maintenPublictable
          ref="tableRef"
          :getHeight="Getheight"
        />
      </el-row>

      <el-row style="padding-top:15px">
        <el-button
          class="maintenButtonStyle button9"
          @click="carReturn"
        >返回到菜单页</el-button><el-button
          class="maintenButtonStyle button1"
          @click="toNext"
        >下一步</el-button>
      </el-row>
      <el-row>
        <nowTime style="padding-top:0" />
      </el-row>
    </el-row>
    <!-- 弹出下拉框 -->
    <van-popup
      v-model="show"
      style="width: 50%; height: 50%"
    >
      <popup
        :titles="titles"
        :Types="Types"
        @closeTan="closeTan"
        :columns="popupColumns"
        @popupValue="getpopupValue"
      />
    </van-popup>
  </div>
</template>
<script>
import maintenPublictable from "../../../components/maintenPublictable.vue";
import nowTime from "../../../components/nowTime.vue";
import popup from "../../../components/popup.vue";
import { Toast, Dialog } from "vant";
import { APIB } from "@/API/blazor.js";
import { Message, Notification } from "element-ui";
export default {
  // inject: ["reload"], //刷新
  data() {
    return {
      isOpen: true,
      activeNames: ["1"], //折叠面板
      // 应该是从后台获取的 (下拉选择数据) ———— 测试数据
      equipment: [],
      // 主表信息数据(form)
      equipmentData: {
        code: "", //装备编号
        model: "", //型号
        checkUser: "", //检查人
        checksUser: "", //复查人
        faultSymptom: "", //故障现象
        faultReason: "", //故障原因
        result: "", //处理结果
        repairUser: "", //维修人
        LUBEHeight: "", //发动机润滑油油位高度
        coolantHeight: "", //发动机冷却液液面高度
        motorOilHeight: "", //柴油机机油油位高度
        flow: "", //液压油流量
        YaLiFW: "", //液压油压力可调范围
        //以下为新增字段
        checkData: "", //检查时间
        motorOilCoolHeight: "", //柴油机冷却液高度
        alternatingVoltage: "", //空载状态下，交流输出电压
        directVoltage: "", //空载状态下，直流输出电压
        frequency: "", //频率
        batteryVoltage: "", //蓄电池电压
        modelID: "",
      },
      show: false, //默认不展开
      //选择器组件title
      titles: "",
      //选择器类型
      Types: "",
      popupColumns: [], //用于给popup传值
      //装备型号下拉数据，
      equipmentModelList: [],
      //下拉数据选项、包含装备编号数据
      equipmentNumberList: [],
      //数据解析后
      columns: [],
      tableData: [],

      //
      Getheight: "375", //设置表格高，给table组件传过去
    };
  },
  components: {
    nowTime,
    popup,
    maintenPublictable,
  },
  /**从第二页面获取的数据 */
  props: {
    data: {
      type: Object,
      default: {},
    },
  },
  mounted() {
    //初始化
    this.init();
    //获取通过路由传过来的参数 ：this.$route.params);
    console.log("dyc30_月维护接收第二个页面传过来的基本数据===", this.data);
    //1. 选择型号后进来，获取型号ID
    if (this.data.modelID != null || this.data.modelID != undefined) {
      //接收选择的型号
      this.equipmentData.modelID = this.data.modelID;
    }
    //2. 从【检查数据】页面跳转到此页面获取的数据
    if (
      this.data.equipmentData !== undefined &&
      this.data.ClickIdsList !== undefined
    ) {
      this.equipmentData = this.data.equipmentData;
      this.$refs.tableRef.tableData = this.data.equipmentTable;
      this.$refs.tableRef.ClickIdsList = this.data.ClickIdsList;
    }

    //表头
    this.GetColDataList();
    //下拉框数据
    this.initBydicDataId();
  },
  methods: {
    init() {
      var _this = this;
      //调接口，参数param,
      //1. modelID:查询型号==modelID所有所有数据,
      //2. types:因为周月季年的字段都一样，所有通过这个参数判断是哪个表
      const param = {
        modelID: this.equipmentData.modelID,
        types: "月",
      };
      console.log("param===", param);
      //获取form表单数据和表格数据
      let res = {
        code: 200,
        data: {
          code: "",
          model: "",
          checkUser: "",
          checksUser: "",
          faultSymptom: "",
          faultReason: "",
          result: "",
          repairUser: "",
          LUBEHeight: "",
          coolantHeight: "",
          motorOilHeight: "",
          flow: "",
          YaLiFW: "",
          checkData: "",
          motorOilCoolHeight: "",
          alternatingVoltage: "",
          directVoltage: "",
          frequency: "",
          batteryVoltage: "",
          modelID: 2,
          childTable: [
            {
              ID: 1,
              ids: 1,
              item: "汽车底盘",
              itemDetail: "汽车底盘",
              standard: "检查常、无异响",
              check: false,
              dsc: "",
            },
           
          ],
        },
      };
      //把值直接赋给tableRef.tableData
      _this.$refs.tableRef.tableData = res.data.childTable;
      //查询此型号（modelID）下所有的编号
      _this.initBydicDataId(param);
    },
    //编号
    async initBydicDataId(param) {
      var _this = this;
      let res = {
        code: 200,
        data: [
          {
            code: "BH230324021", //装备编号
            model: "XH001", //型号
            modelID: "2", //与型号关联的ID
          },
          {
            code: "BH230324022", //装备编号
            model: "XH001", //型号
            modelID: "2", //与型号关联的ID
          },
        ],
      };
      this.columns = res.data;
    },
    //表头
    GetColDataList() {
      //跟周维护一样
      let res = [
        {
          label: "维护项目",
          child: [
            {
              label: "维护项目 |",
              prop: "item",
              width: "100",
            },
            {
              label: "维护项目 ||",
              prop: "itemDetail",
              width: "100",
            },
          ],
        },

        {
          label: "内容及标准",
          prop: "standard",
          width: "250",
        },
        {
          label: "备注",
          prop: "dsc",
          width: "100",
        },
      ];
      //不能直接使用this.$refs.tableRef.SetDataTableHeader
      this.$nextTick(() => {
        this.$refs.tableRef.SetDataTableHeader(res);
      });
    },

    carReturn() {
      this.$confirm("返回菜单页，不保存此数据，确定返回吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$router.push("/choiceIndex");
        })
        .catch(() => {});
    },
    handleChange(val) {
      console.log(val);
    },
    // 下一步
    toNext() {
      let datasDetail = this.$refs.tableRef.tableData; //明细表
      let ClickIdsListlength = this.$refs.tableRef.ClickIdsList; //勾选的哪些，用于判断是否有勾选
      // console.log("点击下一步,ClickIdsList=", this.$refs.tableRef.ClickIdsList);
      // console.log("点击下一步,表格数据===", datasDetail);

      if (
        this.equipmentData.checkData == "" ||
        this.equipmentData.code == "" ||
        ClickIdsListlength.length == 0
      ) {
        if (this.equipmentData.checkData == "") {
          Toast.fail("请输入检查时间");
        }
        if (this.equipmentData.code == "") {
          Toast.fail("请输入装备编号");
        }
        if (ClickIdsListlength.length == 0) {
          Toast.fail("勾选完成情况");
        }
      } else {
        // 调路由且传数据
        this.$bus.$emit("step", {
          step: "monthCheck", //路由名称
          data: {
            //数据
            equipmentData: this.equipmentData,
            ClickIdsList: ClickIdsListlength,
            equipmentTable: datasDetail,
          },
        });
      }
    },

    // 点击输入框弹出 ====> 字典查询
    inputClick(val) {
      this.titles = "请选择" + val;
      this.Types = val; //当页面同时会使用此处时，通过Types 区分最终回传的值应回显在哪里
      if (val == "装备编号") {
        let res = [];
        this.columns.forEach((item) => {
          res.push({
            prectName: item.code,
            ID: item.modelID,
            value: item.modelID,
            text: item.code,
          });
        });
        this.popupColumns = res;
      }

      this.show = true;
    },
    //从子组件接收(popup 在选择器点击确定后，吧数据给到父组件)
    getpopupValue(val, types) {
      console.log("维护卡==接收的值===", val);
      if (types !== "") {
        if (types == "装备型号") {
          let objs = {
            id: val[0].value,
            name: val[0].text,
          };
          //发生变化了则清除编号，避免错误数据
          if (this.equipmentData.model.id !== objs.id) {
            //清除编号
            this.equipmentData.code = "";
          }
          //型号名称 + 装备型号Id （字典表中的id）
          this.equipmentData.model = objs;
        } else if (types == "装备编号") {
          let objs = {
            id: val[0].value,
            name: val[0].text,
          };
          // 装备编号 + 装备id （装备表中的id）
          this.equipmentData.code = objs;
        }
      }
      this.show = false;
    },
    //点击取消，关闭弹框
    closeTan(val) {
      this.show = val;
    },
  },
};
</script>

<style scoped>
::v-deep .el-date-editor.el-input {
  width: 325px;
}
</style>

成果：

LUNA~
关注
专栏目录
vue兄弟组件传值的方法
weixin_43640375的博客
07-23 290
vue兄弟组件传值的方法 主要通过event事件来传值: 传值的组件使用$emit发送事件 接受值的组件通过$on绑定事件接受 第一步 创建js文件 test.js import Vue from 'vue' export default new Vue() 在main.js中注册js文件 import test from "./plugins/test.js"; Vue.prototype.$test_js = test 第二步 在传值的组件使用$emit发送事件 method
vue变量传值_vue组件传值--详细版
weixin_36123300的博客
01-12 359
vue组件传值在日常开发中比较常见，在官方文档里面也有介绍，但是对于新手理解起来会有一点生涩。所以今天就把这个拉出来写一次。一般有三种传值方式：1.父传子、2.子传父、3.兄弟组件之间通信1.父组件向子组件传值一般会在子组件里面定义props来做接收，这是比较常见的情况这是父组件我是父组件我发送给第一个组件的信息是:{{msg}}import ChildOne from "../component...
Vue.js中兄弟组件之间互相传值实例
12-29
兄弟组件之间互相传值，需要建立一个“中转站”（新的vue实例），并且需要主动触发。 实例上的$on方法来接受监听。 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>组件传值</title> [removed][removed] </head> <body> ~~~~~~我是哥哥~~~~{{msg}}
VUE 兄弟组件传值
Jana Jing的分享
02-24 6620
testA组件接收到testB组件的值：(接收值使用$on)testB组件传值给testA组件：(传值使用$emit)1.在项目中创建一个bus.js文件,暴露一个vue实例。到这里其实使用bus总线实现兄弟组件之间的传值已经完成。2.在父组件中注册两个子组件testA、testB。3.在两个子组件中分别引入bus。testA.vue子组件。testB.vue子组件。
vue 兄弟之间传值
weixin_46166771的博客
03-28 871
vue 兄弟之间传值
vue.js 兄弟组件传值
weixin_30588827的博客
08-25 346
1、兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据 2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。 3、传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。 4、接收数据方，通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数...
Vue第23篇，Vue兄弟组件传值，Vue兄弟组件通讯的两种方式，详细过程（vue同级别组件传值通讯，vue兄弟组件通讯传值常用）
weixin_65793170的博客
01-02 7006
在 Vue.js 中，兄弟组件间的通信并不是像父组件到子组件那样直接，因为它们之间并没有直接的父子关系。不过，Vue 提供了几种机制，来实现兄弟组件之间的数据共享和通信。兄弟组件，就是同级别的组件
VUE兄弟组件传值操作实例分析
10-16
根据给出的内容，实现兄弟组件间传值的步骤如下： 1. 创建事件总线实例。这可以是一个普通的Vue实例，也可以是一个专门为此目的而创建的模块。在这个例子中，我们创建了一个名为eventVue.js的文件，通过import引入...
Vue父子传值，兄弟传值！！
01-06
终于搞懂这个铁憨憨了!!! 1.父传子 ①先给父组件定义个值 msg，msg的值在data中定义 父组件发送的信息为：{{msg}} export default { data () { return { msg:我是父组件, ... 给父亲传值 ②
vue兄弟传值的几种方式
最新发布
09-19
在Vue中，兄弟组件之间的值传递有几种方式： 1. 通过共同的父组件传递：父组件作为两个兄弟...以上就是Vue中兄弟组件传值的几种方式。根据项目的需要和复杂度，选择适合的方式可以更好地实现兄弟组件之间的数据传递。
vue传值：兄弟间传值
一只程序媛
04-09 392
1.新建bus.js import Vue from 'vue' export default new Vue; 2.在a组件产生需要传递的值 //先引入bus.js import Bus from '@/components/bus/bus.js' //兄弟间传值---设置值 Bus.$emit('navItemtable',this.navItemtable); 3.在b...
vue 兄弟组件之间的传值
seimeii的博客
07-29 3935
vue兄弟之间的传值
Vue兄弟间传值
追风筝的博客
12-10 803
实现B页面接收A页面传来的值 步骤1：建一个bus.js文件 import Vue from "vue" export default new Vue 步骤2：A页面引入传值使用($emit) import Bus from '@/bus.js'; //在页面销毁前进行传值 beforeDestroy(){ Bus.$emit('stockPOS',this.tacticsStockPOS) }, 步骤3：B页面引入接收并销毁(on,on,on,off) import Bus from
Vue兄弟之间传值
单飞吧的博客
09-06 470
转载自 https://www.jianshu.com/p/661634c1af9b ，感谢作者 ！！！ 原理 vue非父子通信一般常用的方法有 EventBus 和 Vuex，这里讲下bus 过实例化一个Vue对象( 比如bus = new Vue() )作为母线，在组件中通过事件将参数传递出去 ( bus.$emit(event, [...args]) )，然后在其他组件中再通过bus( 这里按照刚前面实例化Vue对象后的叫法 )来监听此事件并接受参数( bus.$on(event, callback)
vue 中兄弟组件的传值
gepppppppp的博客
04-23 1690
1 在main.js中全局注册一个data:{ eventHub: new Vue() }2 在组件a里定义需要传的参数self.$root.eventHub.$emit('add',{tabnum:tab.index,yuid:tab.$vnode.key,); 3 在组件b里取得需要接受的参数self.$root.eventHub.$on('add',function(data) { ...
vue兄弟组件间传值
weixin_45484007的博客
04-19 1720
1，bus总线传值 2，常规子1传父->父传子2 3，vuex 这里详细说明bus总线传值的总路线及方法：本例为基本用法，如果不理解的可以看下面的详细使用方法： //bus.js import Vue from 'vue'; export default new Vue; //使用 兄弟A 传值 import bus from '路径' bus.$emit('自定义事件名称',输出数据) //使用 兄弟B 接值 import bus from '路径' bus.on('自定义事件名',(r.
vue的兄弟组件传值
rock_23的博客
12-14 463
1.通过状态提升（react叫状态提升，vue可能还有别的叫法）的方法去实现兄弟组件传值 父组件： <template> <div> <ChildrentsA @close="clickhandler"/> <ChildrentsB :data="childrenData"/> </div> </template> <script> im
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值