Vue.js 2中如何通过外部函数调用组件内部方法？

嘿，我来帮你搞定这个问题！你遇到的app.addLine()无效的情况，大概率是因为对Vue2实例方法的调用逻辑理解有点偏差，或者是执行时机/上下文的问题，下面给你拆解正确的实现方式：

为什么直接调用可能不生效？ #

Vue2创建实例时，会把methods里的方法自动代理到实例本身，理论上app.addLine()是可以正常运行的。如果没生效，先排查这几个点：

• 页面上是否存在id="app"的DOM元素（Vue实例挂载的目标）
• 调用代码是否写在Vue实例创建之后
• 有没有拼写错误（比如方法名写成addline小写了）
• 浏览器是否拦截了alert（可以换成console.log('方法执行了')测试）

正确的调用方式 #

方式1：直接调用实例代理的方法（推荐） #

只要你的Vue实例创建完成，直接调用实例上的方法即可，这是Vue2官方设计的便捷方式：

// 你的Vue实例创建完成后
app.addLine();

比如修正后的完整代码：

<div id="app"></div>
<script>
var app = new Vue({
  el: "#app",
  data: {
    config: []
  },
  methods: {
    addLine: function() {
      console.log("addLine方法执行了！");
      // 如果需要操作data里的属性，this会自动指向Vue实例
      this.config.push({ name: "新行" });
    }
  }
});

// 直接调用，正常生效
app.addLine();
</script>

方式2：通过$options.methods调用（绑定上下文） #

如果第一种方式因为某些特殊原因失效（比如上下文丢失），可以通过实例的$options对象获取方法，一定要绑定Vue实例作为this上下文，否则方法里的this会指向全局对象（比如window），导致无法访问data里的属性：

// 用call绑定this为Vue实例
app.$options.methods.addLine.call(app);

额外补充：调用子组件内部方法 #

如果之后你需要调用子组件的内部方法，记得给子组件添加ref属性，然后通过$refs访问：

<div id="app">
  <child-component ref="child"></child-component>
</div>
<script>
var app = new Vue({
  el: "#app",
  components: {
    'child-component': {
      methods: {
        childMethod() {
          console.log("子组件方法执行");
        }
      }
    }
  }
});

// 调用子组件方法
app.$refs.child.childMethod();
</script>

内容的提问来源于stack exchange，提问作者Gabriel social