如何将Vue组件中的cur_page变量传递至外部JS文件？

方法1：直接作为函数参数传递（最常用） #

这是最简单直接的方式，调用外部JS函数时把cur_page作为参数传入即可。

步骤1：修改外部JS文件（@/js/enquiry.js） #

让目标函数新增接收curPage的参数：

// @/js/enquiry.js
export default {
  betting_header(lang, curPage) { // 新增curPage参数
    // 这里直接使用curPage变量
    console.log('当前页码:', curPage);
    // 原有逻辑代码...
    return /* 原返回值 */;
  }
}

步骤2：在Vue组件中传递参数 #

调用betting_header时传入this.cur_page：

<script>
import dataRen from '@/js/enquiry.js'

export default {
  data() {
    return {
      cur_page: 1,
      // 其他数据...
    }
  },
  methods: {
    drawBettingEnquiryTable() {
      let cols = '';
      // 把cur_page作为第二个参数传入
      cols = dataRen.betting_header(this.lang, this.cur_page);
      this.enquiryTable = $('#js-table').DataTable({
        columns: cols,
      })
    }
  }
}
</script>

方法2：传递Vue实例（适合需要监听变量变化的场景） #

如果外部JS需要实时获取cur_page的更新值，可以把当前Vue组件实例传过去，通过实例直接访问或监听变量变化。

步骤1：修改外部JS文件 #

// @/js/enquiry.js
export default {
  bindVueInstance(vm) {
    // 直接访问当前页码
    console.log('初始页码:', vm.cur_page);
    // 监听页码变化
    vm.$watch('cur_page', (newPage) => {
      console.log('页码更新为:', newPage);
      // 这里可以执行对应逻辑
    });
  }
}

步骤2：在Vue组件中传递实例 #

在组件生命周期钩子（比如mounted）里传递实例：

<script>
import dataRen from '@/js/enquiry.js'

export default {
  data() {
    return {
      cur_page: 1,
    }
  },
  mounted() {
    dataRen.bindVueInstance(this); // 传递当前组件实例
  },
  methods: {
    // 原有方法...
  }
}
</script>

方法3：通过回调函数获取变量 #

如果外部JS需要主动获取cur_page的值，可以在组件中提供一个回调函数给外部JS调用：

步骤1：修改外部JS文件 #

// @/js/enquiry.js
export default {
  getCurrentPage(getPageFn) {
    const currentPage = getPageFn();
    console.log('当前页码:', currentPage);
    // 基于页码执行逻辑
  }
}

步骤2：在Vue组件中传入回调 #

<script>
import dataRen from '@/js/enquiry.js'

export default {
  data() {
    return {
      cur_page: 1,
    }
  },
  methods: {
    drawBettingEnquiryTable() {
      // 传入获取cur_page的回调函数
      dataRen.getCurrentPage(() => this.cur_page);
      // 原有逻辑代码...
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者C123D