关于语法糖v-model

• 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突：

• 不适用model时，v-model 默认会利用名为 value 的 props 和this.$emit('input', '这是子组件传递给父组件的数据')来实现数据的双向绑定

// 父组件
<template>
  <div>
    <Child  v-model="dataValue"></Child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {

  components: {
    Child,
  },
  data() {
    return {
      dataValue: '父组件传递过来的数据',
    }
  },
}
</script>

// 子组件
<template>
  <div @click="handleClick">
    {{ value }}
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  props: {
    value: String,
  },

  methods: {
    handleClick() {
      this.$emit('input', '这是子组件传递给父组件的数据')
    },
  },
}
</script>

• 适用model时，v-model会利用model选项来实现数据的双向绑定

// 父组件
<template>
  <div>
    <Child  v-model="dataValue"></Child>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {

  components: {
    Child,
  },
  data() {
    return {
      dataValue: '父组件传递过来的数据',
    }
  },
}
</script>

// 子组件
<template>
  <div @click="handleClick">
    {{ value }}
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  props: {
    giveValue: String,
  },
    model: {
      prop: 'giveValue', // 这里的prop不带s ！！！ 并且它必须在props中定义
      event: 'inputChange', // 
    },
  methods: {
    handleClick() {
      this.$emit('inputChange', '这是子组件传递给父组件的数据')
    },
  },
}
</script>