在“export default”之外的组件内调用 VueJS 方法

Question

我试图从外部调用“方法”内的函数。但是，它不起作用。

Github 问题报告相同： https ://github.com/vuejs/vue/issues/329

 vm.test(); // call a function in method, not working
this.vue.test()  // not working
export default {
  methods: {
    test: function() {
      alert('test fuction called');
    }
  }
}

原文由 Gijo Varghese 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不是很清楚原始海报的实际目标是什么，但是这是在创建 Vue 实例后调用方法的方法：

 var viewModel = new Vue({
    el: "#app",
  data: {
    msg: "Hello there"
  },
  methods: {
    test: function() {
      alert('test fuction called');
    }
  }
});

viewModel.test();

工作示例： https ://jsfiddle.net/Daryn/Lja7pake/3/

如果您要导出单个文件组件，请尝试以下操作：

例子.js

 <script>
   export default {
    methods: {
      test: function() {
      alert('test fuction called');
     }
    }
   }
</script>

主程序

<script>
    import Thing from './example.js';
    Thing.test();
</script>

参考： https ://v2.vuejs.org/v2/guide/single-file-components.html

原文由 Daryn 发布，翻译遵循 CC BY-SA 4.0 许可协议