Vue命令====＞v-model的本质

首先 准备一个 Add的组件

<template>
  <div>
      <p>子组件库存: {{ value }}</p>
      <button @click="addFn">增加+1</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  methods: {
    addFn () {
      this.$emit('input', this.value + 1)
    }
  }
}
</script>

在App.vue, 准备变量传入组件中

<template>
  <div>
    <span>父组件库存: {{ count }}</span>
    <hr>
      
      
    <AddBtn :value="count" @input="val => count = val"></AddBtn>
      
      
    <AddBtn v-model="count"></AddBtn>
  </div>
</template>

<script>
import AddBtn from './components/Add'
export default {
  data () {
    return {
      count: 10
    }
  },
  components: {
    AddBtn
  }
}
</script>

<style>

</style>

v-model实际上实现的是什么?

• 向标签内的value属性赋值

• 给标签绑定input事件, 并把收到的值, 赋予给vue变量

   

• 他的第一句<AddBtn :value="count" @input="(val) => (count = val)"></AddBtn>

  和   <AddBtn v-model="count"></AddBtn>

  的效果 都是一样的 这是一种 Vue语法糖 

  可以让你更少的代码事项更多的功能

   

      <!-- 结论 v-model 语法糖 vue解析这个指令时 会把v-model转换成上面代码的样子 -->

      <!-- 因为之前@input是原生事件,触发时,传递的是事件对象ev -->

      <!-- 现在$emit自己出发的 传递的值是具体数字 -->

      <!-- <AddBtn :value="count" @input="(num)=>{count=num}"></AddBtn> -->

      <!-- 给组件内的value属性进行双向绑定 -->