javascript - Vue js如何在prop更改时调用方法

Question

我正在将组件调用到模型弹出窗口中我想在每个不同的点击事件时在弹出窗口中加载动态数据

这是我在父组件的 html 中的代码

<a v-if="days.label == 1" href="#" @click="viewTimeLog(employee.id, days.date)">
                                        <span class="badge badge-success">
                                            <i class="fas fa-check-circle"></i>
                                        </span>
                                    </a>
<!-- Modal -->
    <div class="modal fade" id="view-emp-time-log" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div v-if="employee_id_number" class="modal-content">
            <employeeattentancelog :employeeIdNumber="employee_id_number" :attentanceDate="attentance_date"></employeeattentancelog>

        </div>
      </div>
    </div>
     <!-- / Modal -->

这是父组件中的脚本

<script>
import EmployeeAttentanceLog from "./EmployeeAttentanceLog.vue";
export default {
   components : {employeeattentancelog: EmployeeAttentanceLog},
   data() {
      employee_id_number : 0,
      attentance_date : '',
   },
methods : {
        viewTimeLog(empId, date) {
            this.employee_id_number = empId;
            this.attentance_date = date;
            $("#view-emp-time-log").modal("show");
        }
    }
}
</script>

这是我在 EmployeeAttendanceLog.Vue 中的脚本

<script>
export default {
    props : ['employeeIdNumber','attentanceDate'],
    data() {
        return {
            employee_id : this.employeeIdNumber,
            date : this.attentanceDate
        }
    }
</script>

当employee_id和日期发生变化时，我需要调用EmployeeAttentanceLog.vue中的方法来加载弹出窗口中的动态数据我怎样才能做到这一点。我完全陷入困境有人可以帮助我吗？提前致谢

Answer 1

您无法在一个函数上同时监视两个 props，您必须为每个要触发更改操作的变量添加一个监视程序。您可以创建一个处理程序(一个函数)在每个观察程序内执行，如下所示:

<script>
export default {
  props : ['employeeIdNumber','attentanceDate'],
  data() {
    return {
      employee_id : this.employeeIdNumber,
      date : this.attentanceDate
    }
  }
  methods: {}
  watch: {
    employeeIdNumber(newVal, oldVal){
      this.handler('param')
    },
    attenanceDate(newVal, oldVal){
      this.handler('param')
    }
  },
  methods: {
    handler(params) {
      // do something here
    }
  }
</script>