Vue之model属性

最新推荐文章于 2025-06-11 20:51:47 发布

原创最新推荐文章于 2025-06-11 20:51:47 发布 · 3.3k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #java

文章介绍了如何在Vue组件上使用v-model来简化父子组件之间的通信。通过定义model选项，可以自定义prop和event，避免了在父组件中绑定额外的方法，使得在子组件内部改变父组件的状态变得更加直接和简单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

- 组件上使用v-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
    },
  },