项目文章详情

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取反】

• 父组件中就需要改成对应的value属性和监听input事件

那当一个组件上面同时有value属性和input自定义事件的时候，且操作的是同一个变量，即可使用v-model来简化

一个组件标签只能有一个v-model指令