Question

我有一个vue-cli项目。这意味着，我有1个.vue文件和main.js. 我想在main.js中调用.vue文件中的方法但是我得到的错误是函数没有定义。如何调用main.js中的.vue文件方法？方法应该在.vue文件中定义，而不是在新的Vue {}中的main.js中定义。

Answer 1

我不相信你可以完全按照你要求的方式去做，因为.vue组件是main.js文件中定义的父实例的子代，并且超出了范围。您可以做的是以这种方式将要使用的功能定义为混合。

创建一个单独的js文件来定义你的mixin，如下所示

var myMixin = {
  data: function () {
    return {
     //
   },
  methods:{
     myAwesomeMethod(){...}
  }
}

然后将其导入主js中，如下所示：

import myMixin from '/mixins/myMixin.js';

然后在你的Vue实例中引用它

new Vue({
  mixins: [myMixin],
})

之后，您可以使用this.myAwesomeMethod

在main.js中调用该方法

或者你可以像下面这样定义你的mixin，只导入它而不需要引用它。

Vue.mixin({
    methods:{
        myAwesomeMethod(){
           //...
        }
    }
});

我不推荐它，但是，如果你绝对不能对main.js文件进行任何修改，那么你可以直接在你的组件定义之外的.vue文件中使用后一种方法定义你的mixin 。

<script>

  // define your mixin
  Vue.mixin({
      methods:{
          myAwesomeMethod(){
              //..
          }
      }
  });

  // define your component
  export default {
      data: function () {
          return {
          }
      }
   }
</script>

然后可以在任何地方调用mixin。

从main.js中的.vue文件调用方法

1 个答案: