第三节: v-model在组件上的使用

v-model既可以用作表单元素,也可以用在自定义组件，无论那种情况,它都只是一个语法糖而已,最终会生成一个属性和一个事件

• 当用于表单元素的时候,vue会根据作用的表单元素类型生成合适的属性和事件
  • 如普通的文本 value属性 和 input事件
  • 单其用于单选框 或者 多选框时，它会时 checked属性 和 change事件

自定义组件中的使用

<Comp v-model="data" />
等效于
<Comp :value="data" @input="data=$event" />

<template>
  <div class="parent">
    <Son :value="num" @input="num = $event"/>
    二者等效
    <Son v-model="num" />
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  name: 'Parent',
  components: {
    Son
  },
  data() {
    return {
      num: 1
    }
  }
}
</script>

<style scoped>
.t-right {
  text-align: right;
}
</style>

<template>
  <div class="son">
    <button type="button" @click="handleClick(value - 1)">-</button>
    <span>{{ value }}</span>
    <button type="button" @click="handleClick(value + 1)">+</button>
  </div>
</template>

<script>
export default {
  name: 'Son',
  props: ['value'],
  methods: {
    handleClick(newValue) {
      this.$emit('input', newValue)
    }
  }
}
</script>

• 用v-model可以自定义 属性名 和 方法名

<template>
  <div class="parent">
    <Son v-model="num"/>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  name: 'Parent',
  components: {
    Son
  },
  data() {
    return {
      num: 1
    }
  }
}
</script>

<style scoped>
.t-right {
  text-align: right;
}
</style>

<template>
  <div class="son">
    <button type="button" @click="handleClick(num - 1)">-</button>
    <span>{{ num }}</span>
    <button type="button" @click="handleClick(num + 1)">+</button>
  </div>
</template>

<script>
export default {
  name: 'Son',
  model: {// => 通过这个来定义
    prop: 'num',//=> 属性名
    event: 'change'//=> 方法名
  },
  props: ['num'],//=> 接受一下属性
  methods: {
    handleClick(newValue) {
      this.$emit('change', newValue)
    }
  }
}
</script>