本节讲点的重点是modal的回调函数
参照(一)的方法吧three.modal.vue弹出的功能实现的
基本的操作介绍:点击第三按钮,弹出modal,然后点击modal里面的按钮,执行一次的回调事件(本例子回调 页面count的 +1 操作)
- three.modal.vue
<template>
<div id="vuex">
<button class="first-modal" @click="firstClick">打开modal</button>
<button class="second-modal" @click="secondClick">点击btn传数据到modal上面去</button>
<button class="three-modal" @click="threeClick">回调函数</button>
<h1 class="h1">{{count}}</h1>
</div>
</template>
<script>
export default {
name: 'vuexdemo',
data(){
return {
show:'我是页面传递过来的数据',
count:1,
}
},
methods: {
add(){
this.count++;
},
firstClick(){
this.$store.dispatch('toggleModal', {
name: 'firstmodal',
status: true
})
},
secondClick(){
this.$store.dispatch('toggleModal', {
name: 'secondmodal',
status: true,
data:this.show,
})
},
threeClick(){
this.$store.dispatch('toggleModal', {
name: 'threemodal',
status: true,
callback:this.add(), //页面的回调操作
})
}
}
}
</script>