vue 如何引用两个外部的popup入经
时间: 2023-07-04 07:25:58 浏览: 46
您可以使用 Vue.js 中的动态组件来引用两个外部的 popup。在您的 Vue 组件中,您可以使用 `component` 标签并使用 `is` 属性来动态地加载您的 popup 组件。
例如,假设您有两个 popup 组件名为 `PopupA` 和 `PopupB`,您可以在您的 Vue 组件中这样加载它们:
```html
<template>
<div>
<button @click="showPopupA">Show Popup A</button>
<button @click="showPopupB">Show Popup B</button>
<component :is="currentPopup"></component>
</div>
</template>
<script>
import PopupA from '@/components/PopupA'
import PopupB from '@/components/PopupB'
export default {
components: {
PopupA,
PopupB
},
data() {
return {
currentPopup: null
}
},
methods: {
showPopupA() {
this.currentPopup = 'PopupA'
},
showPopupB() {
this.currentPopup = 'PopupB'
}
}
}
</script>
```
在这个例子中,我们使用了 `component` 标签,并将 `is` 属性绑定到一个变量 `currentPopup` 上。当用户点击 "Show Popup A" 按钮时,我们将 `currentPopup` 设置为 `'PopupA'`,这将动态加载 `PopupA` 组件;当用户点击 "Show Popup B" 按钮时,我们将 `currentPopup` 设置为 `'PopupB'`,这将动态加载 `PopupB` 组件。