巧妙关闭iView的Modal框
前言在使用 iView 的 Modal 框时,需要给 Modal 框传递一个变量,用于控制显示与隐藏。然后,这个变量由父组件传递给子组件 Modal 框,每次都需要调用父组件的函数修改该变量的值,多调用了一个函数。问:只需父组件传递一个变量给 Modal 框,无需调用函数,就能显示与隐藏 Modal 框。实现如下:环境Vue 2.5.2iView 3.4.1less 3.9.0在 ...
·
前言
在使用 iView
的 Modal
框时,需要给 Modal
框传递一个变量,用于控制显示与隐藏。然后,这个变量由父组件传递给子组件 Modal
框,每次都需要调用父组件的函数修改该变量的值,多调用了一个函数。问:只需父组件传递一个变量给 Modal
框,无需调用函数,就能显示与隐藏 Modal
框。实现如下:
环境
Vue 2.5.2
iView 3.4.1
less 3.9.0
常用方式
HelloWorld.vue
<template>
<div class="content">
<Button type="primary" @click="showModal = true">显示对话框</Button>
<TestModal v-model="showModal"/>
</div>
</template>
<script>
import TestModal from './TestModal'
export default {
components: {
TestModal
},
data () {
return {
showModal: false
}
}
}
</script>
<style lang="less" scoped>
.content{
padding: 20px 60px;
}
</style>
TestModal.vue
<template>
<Modal
v-model="modal1"
title="Common Modal dialog box title"
@on-ok="ok"
@on-cancel="cancel">
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
</Modal>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
default: false,
require: true
}
},
watch: {
value: {
handler (n) {
this.modal1 = n
},
immediate: true
},
modal1 (n) {
this.$emit('input', n)
}
},
data () {
return {
modal1: false
}
},
methods: {
ok () {
this.$Message.info('Clicked ok')
},
cancel () {
this.$Message.info('Clicked cancel')
}
}
}
</script>
原理
在任意一个组件中使用 v-model
都会绑定该组件的 value属性,即该组件会得到父组件传递的一个 value
值,若在组件内使用 this.$emit('input', val)
( val
是一个变量),触发了 input
事件,而 input
事件会改变组件的 value
值,相应的即 v-model
绑定的变量的值就会改变,故父组件绑定的 v-model
的变量就改变了。
总结
使用 v-model
绑定子组件,在子组件中使用 this.$emit('input', val)
即可改变父组件的值。
更多推荐
已为社区贡献11条内容
所有评论(0)