【3.Vue子组件调用父组件方法】

1.概述

使用组件建抛出事件的方式来调用父组件的方法,不直接用this.$parent.function的方法,当然这种方式是可以的。

2.代码实现

2.1 父组件代码

父组件写一个方法给子组件调用

  // 设备点击事件
    // equipId:设备id
    // leftValue:left值
    // topValue:top值
    chileEquipClick(equipId, leftValue, topValue) {
      // 先关闭再打开
      this.clickEquipId = ""; // 清空id
      this.inforDivShow = false;
      this.inforDivLeft = leftValue;
      this.inforDivTop = topValue;

    },

父组件在引入子组件的地方声明子组件抛出来的方法


      <equipLine01 @equipClick="chileEquipClick">equipLine01>

2.2 子组件代码

子组件的方法 等同于 this.$parent.equipClick

 // 设备点击事件
    equipClick(item) {
      // this.$parent.equipClick(item.id, item.leftValue, item.topValue);

      // 抛出事件给父组件
      // item.id 设备id
      // item.leftValue left值
      // item.topValue top值
      this.$emit("equipClick", item.id, item.leftValue, item.topValue);
    },

你可能感兴趣的:(Web前端,vue.js,前端)