vue写两个弹出框如何写
时间: 2024-05-04 17:20:57 浏览: 12
你可以使用Vue的组件来实现弹出框的功能,具体的实现方法如下:
1.定义两个组件:一个是用来显示第一个弹出框的组件,一个是用来显示第二个弹出框的组件。
```
<template>
<div>
<h2>弹出框1</h2>
<!-- 弹出框的内容 -->
</div>
</template>
<script>
export default {
name: 'Popup1',
// 其他组件选项
}
</script>
```
```
<template>
<div>
<h2>弹出框2</h2>
<!-- 弹出框的内容 -->
</div>
</template>
<script>
export default {
name: 'Popup2',
// 其他组件选项
}
</script>
```
2.在父组件中引入这两个组件,并在需要弹出弹出框的地方使用`<component>`标签来动态加载组件。
```
<template>
<div>
<button @click="showPopup1">弹出框1</button>
<button @click="showPopup2">弹出框2</button>
<component :is="popup"></component>
</div>
</template>
<script>
import Popup1 from './Popup1'
import Popup2 from './Popup2'
export default {
name: 'Parent',
components: {
Popup1,
Popup2
},
data() {
return {
popup: null
}
},
methods: {
showPopup1() {
this.popup = 'Popup1'
},
showPopup2() {
this.popup = 'Popup2'
}
}
}
</script>
```
3.在`data`选项中定义一个`popup`变量,用来存储当前需要显示的弹出框组件的名称。在点击弹出框按钮的时候,通过调用`showPopup1`和`showPopup2`方法来设置`popup`变量的值,从而动态加载对应的组件。
这样,当你点击弹出框按钮时,就可以在页面上显示出对应的弹出框了。