Vue 回调函数调用函数外的值

最新推荐文章于 2023-09-26 16:17:15 发布

菜鸟与菜鸡相遇

最新推荐文章于 2023-09-26 16:17:15 发布

阅读量569

点赞数

文章标签： html5 Powered by 金山文档

本文链接：https://blog.csdn.net/apyizhidouzai/article/details/129403910

版权

文章介绍了回调函数的概念，即把一个函数作为参数传递给另一个函数，在主函数执行完毕后执行这个回调函数。在回调函数中，由于作用域限制，不能直接使用`this`，因此通常需要保存`this`的引用，例如`varthat=this`。文中给出了一个Vue.js组件的例子，展示了如何在`onFinish`回调函数中更新组件状态。

摘要由CSDN通过智能技术生成

回调函数:就是传递一个参数化的函数，就是将这个函数作为一个参数传到另一个主函数里面，当那一个主函数执行完之后，再执行传进去的作为参数的函数

在回调函数里不能调用外边的值，不让用this，所以我们声明一个变量来代替this

<template>
  <div>
    <a-row :gutter="16" v-if="lose_login == false">
      <a-col :span="24" style="margin-top: 32px">
        <!-- 触发的事件时声明的回调函数  -->
        <a-statistic-countdown
          title=""
          :value="deadline"
          format="s "
          @finish="(active) => {onFinish(active)}"
        />
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lose_login: true,
    };
  },

  //函数声明
  methods: {
    onFinish: function () {
      //这里代替一下this
      var _that = this;
      _that.lose_login = true;
    },
  },
};
</script>