自定义组件的 v-model 与 .sync 修饰符

v2.cn.vuejs.org/v2/guide/co…

 1. 基本写法

//父组件传值及设置监听事件
<FollowedUser
            :is-followed="articleObj.is_followed"
            @update-is_followed="articleObj.is_followed = $event" /> 
//子组件需要修改父组件传递进来的值
 this.$emit("update:isFollowed",!this.isFollowed)

 2. v-model=val 实质上的完整写法

//父组件  <FollowedUser
             v-model="articleObj.is_followed" />
            //等同于  :value= "val"  @input='val = $event.target.value'
//子组件   props:{
        value:{            type:Boolean,            required:true             },
        },
//子传父   this.$emit("input",!this.isFollowed )
// 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，

//但是像单选框、复选框等类型的输入控件可能会将 value 属性用于不同的目的。
//model 选项可以用来避免这样的冲突：进行重新命名, 
//子组件重新命名规则    
    model:{        
        prop:'isFollowed',   //属性名        event:"update-is_followed"  //自定义事件名
    },
    props:{
        isFollowed:{            type:Boolean,            required:true        },
    },
//子传父   this.$emit("update-is_followed",!this.isFollowed )

3. .sync修饰符

//但是一个组件只能使用一次v-model, 通过.sync修饰符, 推荐以 update:myPropName 的模式触发事件取而代之
<FollowedUser class="follow-btn"
             :is-followed.sync="articleObj.is_followed"
             :user-id="articleObj.aut_id" /> 
//子传父   this.$emit("update:isFollowed",!this.isFollowed)