Vue2, the child component does not trigger an event to pass a value to the parent component

Requirements: In the el-dropdown drop-down box, the click option is dynamically added to the page. After the content of the component is passed to the page (parent component), the parent component triggers an event and submits it uniformly.

Method: Use the ref attribute to pass the value

In the child component, bind the value to be passed to ref

<el-table :data="brands" fit style="width: 100%" ref="brands">
<el-input v-model="monthlySale" placeholder="请输入" ref="monthlySale">
data() {
    return {
      distributeType: "",
      monthlySale: "",
      annualSale: "",
      brands: [{}]
    };
  },

Receive child component content in parent component

<distribution-material
          v-for="i in selectedDistriVariety"
          :key="i.lineCode"
          :title="i.lineName"
          ref="distributionmaterial"
        >
        </distribution-material>
data() {
    return {
      distributionForm: {
        list: [{
          brands: [{}]
        }]
      }
     }
submit() {
      this.distributionForm.customerNo = this.customerNo
      for(let i=0;i<this.$refs.distributionmaterial.length;i++){
        // 这里是为了让list数量跟得上子组件传回的值的数量,否则报错
        // 本身data里面已经定义了一个list,因此当i>0时才再增加一个list
        if(i>0) {
         this.distributionForm.list.push({})
        }
        console.log("this.$refs",this.$refs);
        console.log(this.distributionForm.list);
        this.distributionForm.list[i].address = this.address
        this.distributionForm.list[i].annualSale = 
        this.$refs.distributionmaterial[i].annualSale
        this.distributionForm.list[i].areaZh = this.areaZh
        this.distributionForm.list[i].brands = this.$refs.distributionmaterial[i].brands
        this.distributionForm.list[i].cityZh = this.cityZh
        this.distributionForm.list[i].customerNo = this.customerNo
        this.distributionForm.list[i].distributeType = 
        this.$refs.distributionmaterial[i].distributeType
        
        
        }

Guess you like

Origin blog.csdn.net/Dolores_zsq/article/details/130583103