【Vue】利用v-model特性封装Dialog弹窗或可编辑窗口。

简单介绍，Vue里面的v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

v-model封装弹窗

父组件

<manage-dialog v-model="isVisible"/>
<div @click="isVisible=true"> 点我弹窗</div>

export default {
components: {manageDialog},data(){return{isVisible:false}
 }

} 

子组件

 <el-dialog:visible.sync="isVisible":before-close="handleClose" ><script> export default {model: {prop: 'isVisible',event: 'close'//这个要是close},props: {isVisible: {type: Boolean,default: false},},methods: {handleClose() {this.$emit('close', false)}}

} </script> 

小结：

这个比较简单，需要注意的是子组件里的model允许一个自定义组件在使用 v-model 时定制 p