[Vue]关于使用v-model这件事

先说几个关键挖个坑 明天(11.2)回来补

1. Object.defineProperty()
2. get()
3. set()
   本篇不涉及原理 就一普通的父传子 字传父

首先一般用来干啥?

父传给子数据 子再修改数据改变父亲

1. 比如 在子组件中有img 默认为空
2. 父亲可以传给子 图片地址 作为默认图片 :value=“img”
3. 子接受到img 就赋值给 自己src地址 :src=“value”
4. 子想改变 就通过方法emit 修改 .$emit(“input”,“新的地址”)
5. 此时 子组件标签 加上 @input=“img=$event”
6. 以上 形成双向绑定

给个简单的例子

父亲给孩子100快 孩子通过v-model让父亲多给孩子零花钱

<template>  这是父组件
  <div>
    <son :value="money" @input="money=$event" /> 
    <!-- <son v-model="money" /> -->
    我要给孩子 {{ money }} 元
  </div>
</template>
<script>
import son from './son.vue' //1. 先导入
export default {
  components: { son }, //2. 注册   // 3 . 在template中使用
  data () {
    return {
      money: 100
    }
  }
}
</script>

<template>
  <div>
    <h1>我是son</h1>
    <button @click="addAge">点我加钱!!!</button>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Number,
      default: ''
    }
  },
  data () {
    return {
      money: this.value
    }
  },
  methods: {
    addMoney () {
      this.$emit('input', this.money++)
    }
  }
}
</script>