如何从 Vue 外部进行方法调用和 v-shows

Question

我们正在使用Vue.js实现弹窗功能。 Vue 应用程序中的“单击”按钮将正确启动弹出窗口，但以下示例 vueApp.methods.openModal() /// 从外部调用当我从外部调用时，弹出窗口不会出现，尽管函数调用本身是可能的。为什么是这样？另外，像这样从 Vue 外部调用方法时，如何使 v-show 正常工作？

xxx.html

<div id="app">
  <button v-on:click="openModal">Click</button>
  <div id="dbg_overlay" v-show="showContent" v-on:click="closeModal">
    <div id="content"></div>
    <button v-on:click="closeModal">Close</button>
  </div>
</div>

xxx.js

const vueApp = {
  data() {
    return {
      showContent: false,
    }
  },
        
  methods: {
    openModal: function() {
      this.showContent = true
    },
    closeModal: function() {
      this.showContent = false
    }
  },  
};
      
Vue.createApp(lessonScheduleEdit).mount("#app");

vueApp.methods.openModal() /// call from outside

vue 我正在使用：

<script src="https://unpkg.com/vue@next"></script>

Answer 1

最简单的方法是使用 v-if 并检查您定义的值是否等于 true。像这样：

<div id="app">
  <button id="show-modal" @click="showModal = true">Show Modal</button>
  <modal v-if="showModal" @close="showModal = false"> 
    <!-- Your content in here -->
  </modal>
</div>

你也可以在你的方法中做 showModal = true，就像这样：

methods: {
  clickModal() {   //just renamed in template it's @click="clickModal()"
    showModal = true;
  }
}

希望对您有所帮助！

Answer 2

您需要以下内容：

将您的 Vue 应用程序分配给一个变量，该变量在全局范围内的任何地方都可用。
一旦你让它可用，要调用在它的 method 中定义为 methodName 的方法，你必须直接调用它（例如：myVar.methodName()，不像myVar.methods.methodName()!!!)

如何使变量全局可用：

声明全局可用变量的最常用方法是使用 window 对象：

window.myVueApp = Vue.createApp(vueApp).mount("#app");

// from anywhere else in the window:
window.myVueApp.openModal();

使变量全局可用的更现代的方法是使用 window 的别名：globalThis:

globalThis.myVueApp = Vue.createApp(vueApp).mount('#app');

// both of these will now work 
// because, inside a browser, globalThis === window
window.myVueApp.openModal();
globalThis.myVueApp.openModal();

注意：我可以使用 globalThis 吗？
但是，即使 window 现在有一个奇特的新别名，使用它也同样糟糕（阅读下面的原因）。

注意： 用变量污染全局范围通常被认为是不好的做法，因为它有名称冲突的风险（当您的代码和其他人的代码在同一页面上使用时，不小心使用了相同的全局范围变量名称）。

最终，这意味着，至少在理论上，您的代码是不可靠的（在某些情况下它可能会失败）。理想情况下，您希望编写牢不可破的代码，它不会在任何时候干扰（破坏）同一页面上的任何其他内容运行。

为了尽量减少这种命名冲突风险，您实际上可以将您的应用程序放在 Vue 命名空间中，该命名空间已经在全局范围内可用，因为我们已经知道 Vue 命名空间没有 myVueApp 属性（其他人也会在您的页面上使用 Vue.myVueApp 的可能性可以忽略不计）：

Vue.myVueApp = // ...your app here...

看到它工作：

const vueApp = {
  data() {
    return {
      showContent: false,
    }
  },
        
  methods: {
    openModal: function() {
      this.showContent = true
    },
    closeModal: function() {
      this.showContent = false
    }
  },
};
      
Vue.myModeratelyAmazingVueApp = Vue.createApp(vueApp).mount("#app");

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app">
  <button @click="openModal">Click</button>
  <div id="dbg_overlay" v-show="showContent" @click="closeModal">
    <div id="content"></div>
    <button @click="closeModal">Close</button>
  </div>
</div>

<button onclick="Vue.myModeratelyAmazingVueApp.openModal()">external open</button>

如何从 Vue 外部进行方法调用和 v-shows

How to make method calls and v-shows work from outside Vue

javascript

vue.js

vuejs3