vue2和vue3中组件之间的传值

vue2:

        父传子：在vue2中父传子一般使用的都是props进行传递。子组件使用props接收父组件传递过来的值之后，就可以响应式的显示在页面上，这里注意props是只可读的，想要修改只能在父组件中进行修改。

        子传父：子组件想要传递数据向父组件，需要借助emits进行事件的传递，通过触发emit事件，然后父组件会接收事件，并接收数据，做出相关的反应。

vue3中：    

        在vue3中，使用组合式API进行组件之间的传值。需要注意的是，这里更vue2不同的是需要借助一些宏函数。

组合式API--父子通信：

        组件导入不需要注册，import导入之后就可以直接使用

        基本思想：父组件中给子组件绑定属性

                         子组件内部通过props选项接收

                        子组件接收数据：defineProps编译器宏函数

                            const props=defineProps({

                                message:String(数据类型)

                                            })

                            传递过来之后，就可以直接使用了{{message}}

    组合式API下的子传父:

        基本思想：

                父组件中给子组件标签通过@绑定事件

                子组件内部通过$emit方法触发事件

                通过defineEmits编译器宏生成emit方法

               const emit=defineEmits(['get-message'])

               触发自定义事件，并传递参数，根vue2相同

               下面在调用emit('get-message','this is son msg')

通过传递值，对响应式数据的传递，具有很好的效果，主要在使用的时候需要注意，在何时触发，在核实显示数据，数据从哪里来，顺清楚这里面的数据基本上就可以掌握了。

补充：

组合式API=provide和inject：

        作用和场景：

            顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信

        跨层传递普通数据:

            顶层组件通过provide函数提供数据

                provide('key',顶层组件中的数据)

                provide('key',响应式数据)

                provide('key',function)

                这里也可以直接传递一个方法，在底层组件也可以直接触发，可以修改响应式组件

            底层组件通过inject函数获取数据

                const message-inject('key')

                const fun=inject('key')//这里可以在底层触发之后fun方法