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

Posted 2023-02-22

【中文标题】如何从 Vue APP 外部调用/初始化 Vue 方法

【英文标题】：How to call/initlialize a vue method from outside of the Vue APP

【发布时间】：2020-05-15 14:38:39

【问题描述】：

我有一个安装在现有网站页面中的应用程序。为了初始化应用程序，我在我的 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() 方法并开始整个过程​​。

这可能吗？

【问题讨论】：

所以你想在 Vue 空间中单击一个按钮来启动应用程序？我不明白，你为什么大喊大叫？

为了更好的上下文，但现在那里很好，很凉爽。是的，希望在 Vue APP 逻辑之外有一个点击按钮，它只是启动 Vue 应用程序。目前，页面加载完毕，然后Vue需要加载来获取按钮来启动toggle方法。就像进入 Vue 并从 Vue 外部调用方法一样。不确定这是否可能。

***.com/questions/40759731/… 我认为这与我想要的密切相关，但我使用的是 Vue CLI，他们使用的是 Vue CDN

第一步：首页只有一个按钮，没有加载js或者vue。第 2 步：单击该按钮，启动 vue 并点击该功能之一。我说的对吗？

有 JS，但是 Vue 作为 APP 加载到 id="app" 页面是普通的 html,CSS,JS。尝试使用普通JS触发切换并启动应用

【参考方案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>

【讨论】：

Vue 仅位于 Vue CLI 应用程序中，而不位于文档页面上。所以我不确定这是否可行，您使用的是 Vue CDN。虽然我可以试试。

如果你生成CLI，你可以尝试在vue初始化var app = new Vue(router, store, ...)之后，在index.js中设置按钮脚本onclick监听器。