vue里面的model

vue里面的model双向绑定，就是一种代码组合即语法糖，我们之前在实现功能的时候，父组件通过props向子组件里面传递参数，子组件处理完成之后，如果想将结果传回父组件的话，需要调用emit里面的自定义方法实现回传。父组件通过定义的方法，然后接收到子组件传递过来的参数之后，进行赋值处理即可。

vue这里面实现了一个简单的方式实现了上面的功能，及model，双向绑定。对于开发者来说，简化了一些代码，实际就是vue给你封装了，只需要简单的代码就可以实现传值-修改-回传的功能，其实本质还是 传递数据-加工-调用回调方法进行赋值。

vue官方文档对model的用法描述的很详细:自定义事件 | Vue.js

详细的看官方文档，这里面，我只是把文档里面主要的代码拷贝出来

v-model: 单个

父组件:

<my-component v-model:title="bookTitle"></my-component>

子组件:

app.component('my-component', {
  props: {
    title: String
  },
  emits: ['update:title'],
  template: `
    <input
      type="text"
      :value="title"
      @input="$emit('update:title', $event.target.value)">
  `
})

v-model:多个组件:

父组件:

<user-name
  v-model:first-name="firstName"
  v-model:last-name="lastName"
></user-name>

子组件:

app.component('user-name', {
  props: {
    firstName: String,
    lastName: String
  },
  emits: ['update:firstName', 'update:lastName'],
  template: `
    <input 
      type="text"
      :value="firstName"
      @input="$emit('update:firstName', $event.target.value)">

    <input
      type="text"
      :value="lastName"
      @input="$emit('update:lastName', $event.target.value)">
  `
})

上面代码主要看的地方为:

v-model:***: 父组件传递参数到子组件，如果是驼峰命名，在父组件里面记住用-分割

props: 子组件接受的参数

emit: 定义回调的方法，如果不在这里面定义，也可以自己写方法，然后通过this.$emit的方式回调。注意，这里面的方法为update，当然，在其他的博客里面，也会看到有change等方法。这些方法不需要在父组件调用子组件的时候重新定义，都是由vue已经定义好的

调用回调方法的时候，update:** 后面的变量名就是props接收的变量名，千万不要在分割，然后使用-进行连接了。