Vue之model属性(vue中v-model)

Vue之model属性 组件上使用v-model

推荐整理分享Vue之model属性(vue中v-model)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue-model,vue3 modelvalue,vue的model属性,vue中model绑定对象的属性时,vue中model在组件中的使用,vue中model在组件中的使用,vue的model属性,vue-model,内容如对您有帮助，希望把文章链接给更多的朋友！

官网解释：允许一个自定义组件在使用 v-model 时定制 prop 和 event。

默认情况下，一个组件上的 v-model 会把 value 用作 prop

且把 input 用作 event，

但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。

使用 model 选项可以回避这些情况产生的冲突。

简单来讲就是将组件实现数据双向绑定的效果，

需要注意的是自定义组件字眼表明其主要的使用场景是在组件内部，

后面的那一大段是说明缘由的

————————————————

原文链接：https://blog.csdn.net/seimeii/article/details/121854665

组件上使用v-model

之前我们要在子组件改变父组件里面控制子组件状态的字段，需要$emit一个方法，还需要在父组件绑定方法就非常麻烦，像如下写法

父组件中

用model这种方式就显得极为简单，只要在父组件中v-model绑定，在子组件定义model的prop和event就可以实现子组件内部改变父子组件关联的值，不需要再emit出方法到父组件

父组件中：

<followUpModal ref="followUpModal" v-model="followUpModalVisible"></followUpModal>

子组件中：

这样写省去了父组件绑定方法，简单了好多

代码再粘贴一下下啦，有的小懒虫可以直接复制

<el-dialog:title="modalTitle":visible.sync="followUpModalVisible"width="50%"center:modal="false"class="tool-dialog"@close="onclose"destroy-on-closecloseBriefModal:close-on-click-modal="false"><div>test</div></el-dialog> model: {prop: 'followUpModalVisible',event: 'changeVisible',},props: {followUpModalVisible: {type: Boolean,default() {return false;},},}, methods: {// 点击关闭抽屉层onclose() {// 修改model中的值this.$emit('changeVisible', false);image.png},},