如何将变量从prop作为函数发送到子组件？

Question

我想从函数发送一个变量。我在Form.vue中的方法内部有函数，我想从该函数中将变量“ empNumber”发送到子组件Emp.vue

我试图用道具来做。但这没用。

Form.vue（父级） 内

methods : {
    addEmp(){
      this.employees.push({
        emp_id : '',
        jan : '',
        feb : '',
        mar : '',
        apr : '',
        may : '',
        jun : ''
      });
      let empNumber = this.employees.indexOf(this.employees[this.employees.length-1])+1;
      alert(empNumber);

  }
}

Emp.vue（儿童） 内

export default {
   name: "EmpSection",
   props : "counter"
}

html

我想在Emp.vue模板的{{counter}}内部传递变量。

<label class="col-sm-4">
  Employee{{counter}}
</label>

Answer 1

在您的父$subject_list = ClassSubjectList::groupBy('class','group')->get(); return $subject_list; / html部分中，您必须包括子组件，以便可以绑定所需的数据作为道具：

template

该道具必须是您的主实例（Form.vue）上的数据：

<div id="app">
...
<emp-section :counter="empNumber"></emp-section>
</div>

所以您的方法现在将变成这样：

data(){
 return {
  empNumber : 0 
 }
}