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>

我需要在 EmployeeAttentanceLog.vue 中调用一个方法，以便在 employee_id 和日期更改时在弹出窗口中加载动态数据我怎样才能做到这一点。我完全被困住了任何人都可以帮助我吗？提前致谢

Answer 1

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

You can you vue JS's watch property to observe the change in any property or data

Answer 2

你不能在一个函数上观察两个 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>

Vue js 如何在 prop 改变时调用方法

Vue js how to call method wen prop change

html

javascript

popup

vuejs2