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

我有一个vue cli项目。这意味着，我有1.vue文件和main.js。 我想从main.js中的.vue文件调用方法 但我得到一个错误，函数没有定义。 如何在main.js中调用inside.vue file方法？

---

方法应该在.vue文件中定义，而不是在新vue{}的main.js中定义。

我不相信您可以完全按照您要求的方式来定义，因为.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

或者，您可以像下面那样定义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>

//定义你的混音
米辛({
方法：{
myAwesomeMethod（）{
//..
}
}
});
//定义您的组件
导出默认值{
数据：函数（）{
返回{
}
}
}

---

那么mixin应该可以在任何地方调用

你能再解释一下你的用例吗？听起来你的想法会破坏组件在

.vue

文件中的封装。组件应该使用道具和事件与外部世界进行通信。如果您只想重复使用代码，请将其作为一个单独的模块，并在两个位置导入它。