v-model 语法糖

1、前言

对于 Vue 封装组建，须要对 v-model 语法糖有理解，如下为总结

2、基础

v-model 是针对于父子组件的

子组件

绑定 value 属性和 input 事件，value 属性的值经过 porp 传入，出发的 input 事件经过 $emit('input', xxx) 传出

<template>
  <input :value="value" @input="$emit('input', $event.target.value)" />
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    value: String
  }
}
</script>

父组件

经过 v-model 便可对子组件的值进行绑定操做

<template>
  <child-component v-model="value"></child-component>
</template>

<script>
import ChildComponent from "..."
export default {
  name: 'FatherComponent',
  components: { ChildComponent },
  data () {
    return {
      value: ''
    }
  }
}
</script>

3、自定义规则

可改变子组件必须接收 prop: value，$emit：input 的规则

子组件

经过 model 改变关系

<template>
  <input :value="select" @input="$emit('change', $event.target.value)" />
</template>

<script>
export default {
  name: 'ChildComponent',
  model: {
    prop: 'select',
    event: 'change'
  }
  props: {
    select: String
  }
}
</script>

4、嵌套 v-model

若此时存在二次封装，须要封装父组件

父组件

一样绑定 value 属性和 input 事件

<template>
  <child-component :value="value" @input="handleChange"></child-component>
</template>

<script>
import ChildComponent from "..."
export default {
  name: 'FatherComponent',
  components: { ChildComponent },
  props: {
    value: String
  },
  methods: {
    handleChange (val) {
      this.$emit('input', val)
    }
  }
}
</script>

爷爷组件

经过 v-model 绑定父组件的值

<template>
  <father-component v-model="value"></father-component>
</template>

<script>
import FatherComponent from "..."
export default {
  name: 'GrandFather',
  components: { FatherComponent },
  data () {
    return {
      value: ''
    }
  }
}
</script>