我們正在使用 Vue.js 來實作彈出功能。Vue App中的“點擊”按鈕會正確啟動彈窗，但是下面的例子vueApp.methods.openModal() /// call from outside 從外面呼叫的時候沒有出現彈窗，雖然函式呼叫本身是可以的. 為什么是這樣？另外，當像這樣從 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>
uj5u.com熱心網友回復：
最簡單的方法是使用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;
}
}
希望這能幫到你！
uj5u.com熱心網友回復：
您需要以下內容：
- 將您的 Vue 應用程式分配給一個變數，該變數可在全域范圍內的任何地方使用。
- 一旦您使其可用，要呼叫
methodName在其methods 中定義的方法，您必須直接呼叫它（例如：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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/403397.html
標籤：