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>