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

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

v-model封装弹窗

父组件

 点我弹窗

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

} 

子组件

小结：

这个比较简单，需要注意的是子组件里的model允许一个自定义组件在使用 v-model 时定制 prop 和 event。官方文档里有写，一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突，所以上面的子组件里，我们用balabala来替换掉了原本的input事件，所以在$emit的时候，里面的事件名应为close，否则默认为input.

其实还有第二种方法，是需要使用.sync修饰符。子组件通过this.$emit(“update:show”,false);来操作的。这里就不过多介绍。

v-model封装可编辑表单

先看官网介绍=> 自定义事件可以用于开发支持 v-model 的自定义表单组件。回忆一下 v-model 在原生元素上的用法：

上面的代码其实等价于下面这段 (编译器会对 v-model 进行展开)：

父组件

子组件

用 model 选项的 组件使用 v-model

父组件

复制代码 

子组件

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取