如何实现同文件内原生JS向Vue传值及调用原生JS函数

你现在的代码结构里，两个script标签的内容都运行在同一个浏览器全局上下文，原生JS定义的全局变量、函数默认挂在window对象下，Vue实例可以直接访问，不需要额外做复杂的桥接层。

Vue调用原生JS方法 #

你已经验证过videoPause()可以在Vue方法里直接调用，说明全局作用域的访问是通的，isDotMoved的调用逻辑完全一致，不需要额外处理：

new Vue({
  el: '#vue-app',
  methods: {
    isDotsMoved() {
      // 直接传入你业务中记录的拖拽距离参数，拿原生方法的返回值做判断
      const dotMoved = isDotMoved(/* 传入实际的移动长度值 */)
      // 复选框选中且点位未移动时弹提示
      if (this.checkboxVal && !dotMoved) {
        alert('请先移动点位再操作')
        return
      }
      // 后续业务逻辑
    },
    videoPauseVue() {
      // 你现有可正常运行的调用逻辑
      videoPause()
    }
  }
})

踩坑提示：如果后续你把原生JS逻辑写到了IIFE闭包里，记得要把需要给Vue调用的方法显式挂到window上，比如window.isDotMoved = isDotMoved，否则Vue访问不到。你现在的写法是直接在顶层用var/function声明，默认就是全局的，不用额外处理。

原生JS变量赋值给Vue变量的最简方案 #

你现在顶层声明的plainJS本身就是全局变量，完全不需要走Django模板传值的迂回方式，直接在Vue初始化阶段赋值即可：

var app = new Vue({
  el: '#vue-app',
  data() {
    return {
      vueVar: null,
      checkboxVal: false // 绑定复选框的v-model值
    }
  },
  created() {
    // 直接取全局的plainJS赋值，一行代码搞定
    this.vueVar = plainJS
  }
  // 其余配置
})

如果plainJS的值会在原生JS逻辑里动态变化，需要同步到Vue的话，直接在原生JS修改该值的位置，通过全局的Vue实例app赋值即可：

// 原生JS里修改plainJS的位置
plainJS = 200
// 同步更新Vue里的值
app.vueVar = plainJS

完整可运行结构参考 #

<!-- 原生JS代码放前面，保证Vue初始化时全局变量/方法已经存在 -->
<script>
var plainJS = 100;
// 记录点位移动距离的全局变量，根据你的业务实际赋值
var dotMoveLength = 0;

function isDotMoved(length) {
  if (length !== 0) {
    console.log('点位移动长度：', length)
    return true
  }
  return false
}

function videoPause() {
  document.querySelector('video').pause()
}

// 你的原生点位监听逻辑，拖拽时更新dotMoveLength
</script>

<script>
var app = new Vue({
  el: '#vue-app',
  data() {
    return {
      vueVar: null,
      isCheck: false
    }
  },
  created() {
    this.vueVar = plainJS
  },
  methods: {
    onCheckChange() {
      if (this.isCheck && !isDotMoved(dotMoveLength)) {
        alert('请先移动点位再勾选')
        this.isCheck = false // 可根据需求决定是否回退勾选状态
      }
    },
    triggerPause() {
      videoPause()
    }
  }
})
</script>

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