父子通信的语法进化

1.最原始的父子通信

父传子: prop    
  1.在子组件身上绑定一个自定义属性   2.在子组件内部的props选项中接收传下来的数据
    (类型 默认值 额外的校验)  
    (书写规范 :get-name="name"   getName)
    <son :name="name"/>  name:是一个响应式的属性
    <Son :num="1" />  1: num是一个具备类型的数据
    <Son :skills="['react','vue']" />
    
子传父: emit + 自定义事件
  1.在子组件身上绑定一个自定义事件  @get-name="getName"
  2.在子组件内部通过触发一个自定义事件来把子组件中的数据传给父组件  emit('get-name','子组件中的数据')
    本质: 在子组件内部触发一个父组件中的函数 并且把要传递的数据当成实参传入

2.基于props的双向绑定 - .sync

1. 原始的写法
  父组件
  <Son :name="fatherName" @change-name="changeName"/>
  methods:{
    changeName(newName){
       this.fatherName = newName
    }
  }
  子组件
  emit('change-name','子组件中的数据')
  
2. .sync写法
   <Son :name.sync="fatherName"/>
   emit('update:name','子组件中的数据')

3.组件身上书写v-model

1. 给子组件身上绑定了一个名称为`value`的自定义属性    `<Foo :value="name"/>`
2. 给子组件身上绑定了一个 名称为 `input`的自定义事件   `<Foo  @input="callback"/>`
3. 在绑定的事件回调callback函数中完成了自动将自定义事件触发时传递的实参赋值给绑定的name属性

4.vue3.x去除.sync语法 全都使用v-model即可

1. 给子组件身上绑定了一个名称为`modelValue`的自定义属性    `<Foo :value="name"/>`
2. 给子组件身上绑定了一个 名称为 `update:modelValue`的自定义事件   `<Foo  @input="callback"/>`
3. 在绑定的事件回调callback函数中完成了自动将自定义事件触发时传递的实参赋值给绑定的name属性
4. 支持在一个组件身上绑定多个v-model, 成对出现的  
   v-model:first-name = "first"   prop -> firstName    update:first-name
   v-model:last-name = "last"     prop -> lastNaME     update:last-name