项目文章详情

最新推荐文章于 2024-01-10 09:36:10 发布

原创最新推荐文章于 2024-01-10 09:36:10 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文详细介绍了如何在Vue中使用v-model进行父子组件间的双向数据绑定，特别是当父组件通过props传递数据给子组件，并需要子组件通过自定义事件修改该数据时。文章强调了props和自定义事件的命名可以自由定制，例如将props属性改为'value'，自定义事件改为'input'。同时，当组件同时存在'value'属性和'input'事件且操作同一变量时，可以使用v-model进行简化，提高代码的可读性和维护性。最后，文章提醒注意v-model在一个组件上只能使用一次。

v-model的使用拓展

运用场景： 当我们的父组件通过props传递某个数据给子组件，且子组件需要通过自定义事件$emit去修改该数据，也就是父子之间共同操作同一个变量数据，我们可以使用v-model指令

上述案例中，props我们定义的是isFollowed，触发的自定义事件是update-is_followed。这只是2个名字而已，我们可以把props属性定义value；自定义事件定义为input

 props: {
    // 是否关注了
    //isFollowed: {
    value:{  // <==== 【1.修改名称为value】
      type: Boolean,
      required: true
    },
   
  },

   this.$emit('input', !this.value)   // <====【4.修改为 input事件和对this.value取反】