如何从 Vue APP 外部调用/初始化 Vue 方法

Question

我有一个安装在现有网站页面中的应用程序。为了初始化应用程序，我在我的 Vue 应用程序中有一个按钮来切换/启动实际的 Vue 逻辑。

这一切都非常简单，页面上出现一个按钮，单击它，应用程序逻辑和方法都变得生动起来。

<template>
  <button @click.prevent="toggle">Click me</button>
</template>
<script>

export default {
  computed: {
    isBurgerActive() {
        return this.$store.getters.getIsNavOpen;
    }
  },
  methods: {
    toggle() { <----- CALL THIS METHOD OUTSIDE OF VUE
      this.$store.dispatch('toggleNav');
      this.$store.dispatch('getProduct');
    }
  }    
}
</script>

我想要做的是用一个不在 Vue 应用程序中的按钮来初始化这个应用程序。本质上是说点击 Vue 应用程序外部的按钮，初始化 toggle() 方法并开始整个过程​​。

这可能吗？

Answer 1

如果将组件分配给变量。您可以调用该变量的方法。实际上，您可以从该变量访问 vue 的其他属性（例如：refs、data）。

试试下面的片段：

var app = new Vue({
  el: "#app",
  data() {
    return {
      isActive: false,
    }
  },
  computed: {
    isBurgerActive() {
        return this.isActive ? 'active':'inactive'
    }
  },
  methods: {
    toggle() {
      this.isActive = !this.isActive;
    }
  },
})

document.getElementById('btn').addEventListener("click", function() {
	app.toggle();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div>
  <button id="btn">
    Click Me
  </button>
</div>

<div id="app">
  <h2>Active: {{ isBurgerActive }}</h2>
</div>