Vue- emit等组件之间调用方法

一：

Vue- emit使用
父组件定义一个方法，在引入组件时携带，子组件即可使用父组件的方法

父引入

    <DetailModal
      v-if="productShow"
      :modal="productShow"
      @closemodal="closemodal"
      @savedetail="savedetail"
      @save="save"
      :haveChosenRows="haveChosenRows"
    ></DetailModal>

父方法 savedetail有参

savedetail(res){
      const product = JSON.parse(JSON.stringify(res))
      console.log(product,1000)
      product.forEach(e=>{
          this.fdata.detailDtoList.push({
            productName:e.productName,
            skuName:e.skuName == 'kg' ? ' ':e.skuName,
            skuCode:e.skuCode,
            saleRate:'',
            // needQuantity:'',// 下单量 kg
            // needQuantity2:'',
            realQuantity:'',// 发货量 kg
            realQuantity2:'',
            noRatePrice:'',// 未税价 kg
            noRatePrice2:'',
            measureName:'',
            measureName2:'',
            itemRateTotal:'',// 含税额
            itemNoRateTotal:'',
            checkNum:'',
            checkDifference:'',
       })
      })
      
    },

方法save无参

save(){
      let productRealCount = 0
      let productRealCount2 = 0
      let itemRateTotal = 0
      let itemNoRateTotal = 0
      this.formdata.detailDtoList.forEach(e=>{
        productRealCount +=  round(e.realQuantity, 2);
        productRealCount2 +=  round(e.realQuantity2, 2);
        itemRateTotal += round(e.itemRateTotal, 2);
        itemNoRateTotal +=  round(e.itemNoRateTotal, 2);
      })
      this.formdata.proCount = this.formdata.detailDtoList.length
      this.formdata.productRealCount = round(productRealCount, 2);
      this.formdata.productRealCount2 =round(productRealCount2, 2);
      this.formdata.rateTotal =  round(itemRateTotal, 2);
      this.formdata.noRateTotal = round(itemNoRateTotal, 2);
    },

子组件
使用this.$emit第一个参数为方法名，第二个为参数

this.$emit('savedetail',this.selectRows)
this.$emit('save')

二：

除了emit还可以使用this将整个页面内容（包括属性、方法）全部传到子组件，子组件随意调用父组件方法

父组件：

<PrintDiv ref="printddd" />// 引入组件

this.$refs.printddd.init(idd,this)

子组件：

return {
      parent:{},
    };
  },
  methods: {
    async init(id,parent) {
      this.parent = parent
      this.parent.cancel();// 调用父组件的cancel方法
    },
    

三：

或者你也可以使用inject注入
父组件：

  provide() {
    return {
      parentData: this,
    };
  },

子组件：

 computed: {},
  inject: ['parentData'],
  async mounted() {
    if(this.parentData.form.type==1){
      //普通询价，移除中标数量列
      const index = this.columns.findIndex((item) => {
        return item.key === "num";
      })
      if(index>0){
        this.columns.splice(index,1);
      }
    }
  },