[10] v-model补充

自定义组件的 v-model

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

<input v-model="parentData">
等价于：

<input 
    :value="parentData"
    @input="parentData = $event.target.value"
>

• 作用：提供数据的双向绑定

  • 数据变，视图跟着变：value
  • 视图变，数据跟着变：@input

• 注意：$event 用于在模板中，获取事件的形参

v-model简化代码

• 目标：父组件通过v-model 简化代码，实现子组件和父组件数据双向绑定

• 简化：v-model其实就是：value和@input事件的简写

  • 子组件：props通过value接收数据，事件触发 input
  • 父组件：v-model直接绑定数据

• 示例

  1. 子组件

    <select :value="value" @change="handleChange">...</select>
    props: {
      value: String
    },
    methods: {
      handleChange (e) {
        this.$emit('input', e.target.value)
      }
    }

2. 父组件

<BaseSelect v-model="selectId"></BaseSelect>