vue 自定义组件 v-model

平时在开发项目写组件时，父子组件间相互传值，父组件传递过去的值通过props，遵循单向数据流规则，子组件不可修改父组件传递过来的值，如需修改需要使用this.$emit('自定义属性', this.XXX)，类似这种情况可以使用 v-model 更为合适

平时我们使用 v-model 一般用在 input 标签上

 <input v-model= 'content' ></input>
 
 export default{
       data(){
            return {
                 content: ' '
            }
       }
 }

等价于

 <input v-bind:value='content' v-on:input='content = $event.target.value' ></input>             

用在组件上类似于

Vue.component( 'base-input' , {
       props: ['value'],
       template:` <input v-bind:value = 'value'  v-on:input = "$emit( 'input', $emit.target.value )" ></input> `
})

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件

所以当我们把 v-model 用在自定义组件上时

父组件：
<Child  v-model = 'flag' ></Child>
export default {
     data(){
        return {
            flag: true
        }
    }
}

子组件：
<button @click = "$emit( 'input',!value )" ></button>
export default {
     props: {
         value: Boolean
     }
}

父组件使用 v-model 绑定在data中定义的属性 flag 传递给子组件（Child），子组件通过 props 接收，名为 value ，通过按钮触发对父组件中 flag 进行修改 （ $emit( 'input',!value ) ）

 

通过在model属性中自定义事件：

如果遇到单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的，model 选项可以用来避免这样的冲突：

父组件：
 <Child  v-model = ‘flag’></Child>
export default {
        data() {
              return { 
                   flag：true
              }
        }
}

子组件：
<button @click = " $emit（'aliasFlag', !flag）"></button>
export default {
         props：{
                flag: Boolean
          }，
         model：{
                prop: 'flag'，
                event: 'aliasFlag'
         }
}

通过使用 model 里的 event 方法自定义属性名，prop代表和props里的变量相对应