在js中调用vue的方法

最新推荐文章于 2025-10-05 23:07:34 发布

原创最新推荐文章于 2025-10-05 23:07:34 发布 · 1w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue

本文介绍了如何在Vue应用的mounted钩子函数中将createNode方法绑定到window对象，以便在JavaScript脚本中直接调用，实现组件间通信和便捷操作。

1、在vue的钩子函数中将需要调用的函数赋值给window。

  mounted () {
    // 将Vue方法传到全局对象window中
    window.createNode = this.createNode
  },
  methods:{
    /**
     * 动态创建节点
     * @param id 节点id
     * @param x 节点坐标(x轴)
     * @param y 节点坐标(y轴)
     * @param text 节点文本
     */
    createNode (id, x, y, text) {
      this.lf.addNode({
        type: 'item',
        x: x,
        y: y,
        id: id,
        text: {
          value: text,
          x: x,
          y: y
        }
      })
    }
  }

2、在js中直接使用

  <script  type="text/javascript">
      var point= "1";
      var arr =[100,200]
      var name = 'test'
      createNode(point,parseInt(arr[0]),parseInt(arr[1]),name)
  </script>