如何在JavaScript中调用Vue实例之外的Vue实例

Question

我该如何在 JavaScript 中调用 test vue？这是我的代码，当我在 JavaScript 函数中执行某些操作时，我想要调用 test。

function clickit() {
   this.test.fetchTestData();    
}

var test = new Vue({
    el: '#viewport',
    data: {
        test_data: []
    },

    mounted: function () {
        this.fetchTestData();
    },

    methods: {
        fetchTestData: function () {
            $.get(test.json, function (data) {
                this.test_data = data;
               alert(this.test_data.isActive);
            });
        }
    }
});

- Winston

---

可能是一个重复问题：如何从 Vue JS 组件外部调用组件方法。 - Saurabh

Answer 1

您正在尝试在clickit()函数内使用this，其中this指的是window，因此您只需删除this即可调用视图模型内的方法：

function clickit() {
   test.fetchTestData();    
}

- craig_h

Answer 2

如果你使用'vue-cli-service build'编译这段代码，变量'test'将不会被定义，但是你可以在'mounted'函数中使它对JavaScript可见:

new Vue({
    el: '#viewport',
    data: {
        test_data: []
    },

    mounted: function () {
        window.test=this;
    },

    methods: {
        fetchTestData: function () {
            $.get(test.json, function (data) {
                this.test_data = data;
               alert(this.test_data.isActive);
            });
        }
    }
});

然后你可以从 JavaScript 中调用它：

function clickit() {
   window.test.fetchTestData();    
}

- Gerard Carbó

---

适用于我，VueJS 2.3.3 版本。谢谢。 - Cruze

谈论污染全局命名空间。至少为您的内容创建一个命名空间，例如window.myNameSpace.test。 - ihor.eth

Answer 3

使用外部JavaScript调用VueJs方法的另一种方式。

首先，我们需要创建一个名为event.js的文件。

import Vue from 'vue';

export default new Vue({
    data: {

    }
});

之后我们需要将event.js导入到我们的组件中。

import Event from "../event.js";

然后，我们可以在JavaScript函数上触发一个事件，如下所示。

function yourJavascriptFunction(){
    Event.$emit("fetchdata");
}

在您的组件中，mounted 属性应该如下所示:

mounted() {
  Event.$on("fetchdata", group => {
    this.fetchData();
 });
},
methods() {
  async fetchData() {
     console.log('hoooray :)');
  }
},

- Harsha Basnayake