要件: el-dropdown ドロップダウン ボックスでは、クリック オプションがページに動的に追加されます。コンポーネントのコンテンツがページ (親コンポーネント) に渡された後、親コンポーネントはイベントをトリガーし、均一に送信します。
方法: ref 属性を使用して値を渡します
子コンポーネントで、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: [{}]
};
},
親コンポーネントで子コンポーネントのコンテンツを受信する
<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
}