Vue2&Vue3中的组件传值&自定义v-model语法糖

祖孙组件间传值

Vue3中的祖孙组件间的传值:
①父组件通过使用provide（）方法，定义依赖数据。
proviede(名称，传输的数据名)记得返回出去
②子组件通过inject接收：let xx=inject(名称)
③修改的话直接通过事件.value修改数据，比起Vue2修改值少了转换和发送自定义事件步骤

Vue2的祖孙组件间的传值
①父组件通过provide(）{return{name:this.name}}函数定义依赖数据
②子组件通过inject:[]接收父组件传递参数
③修改值要写方法，只有父级变了它才会变。所以给父级定义个方法，再通过provide()依赖传递(不仅可以依赖数据，还可以依赖方法)，在子孙组件方法中调用父级定义的方法并传实参过去。

父组件

兄弟组件传值

Vue2中Vue是个构造函数，所以兄弟组件传值，用中央事件总线，给vue的实例添加数据。
而在Vue3中Vue是个对象，所以无法再使用给实例添加数据的方式。我们可以把数据都给父级再去修改。
注意：在Vue3中不使用的数据就不需要返回
Vue3的兄弟组件传值 数据提升的方式
①在共同的父级定义数据和方法。父级通过provide（子级接收名，传递的值）方法设置为依赖数据
②子级在inject（子级接收名）方法中接收数据，页面中直接使用，记得return
③另一个子组件在inject()方法中接收修改数据的方法，并绑定点击事件

父级

子级

Vue2和Vue3中的自定义组件

Vue2中
①父级给子组件绑定属性为:value=xx,绑定事件为@input=xx，就可以使用语法糖sync:属性=xx，
②子级通过props接收的值，可直接在页面中使用
③子级修改父级数据自定义事件$emit('update:属性'，修改的值)
Vue3中
①父级给子组件绑定属性为:value=xx，绑定事件为@input=xx,就可以使用语法糖v-model:属性=xx，
②子级通过props接收的值可直接在页面使用（父级必须把数据return出去，子级才可使用）。
③子级要修改接收的父级数据，直接通过setup()中第二个参数context的emit方法。emit('update:属性'，修改的值)

    
Son3
    

        
飞机名称：{{planeName}}
        
飞机价格：{{planePrice}}
        
飞机地址：{{planeAddress}}
        
修改飞机名称
        
修改飞机价格
        
修改飞机产地