Vue中的组件传参

在Vue中，组件传参分为三种情况

对应的三种情况我们只需要牢记三点：

1. 父传子，使用 props 属性

2. 子传父，使用 事件派发 ($emit)

3. 非相关组件之间传参，使用依赖注入（provide & inject）或者 vuex 和 pinia 等状态管理插件
   

父传子

1. 首先在子组件props中创建一个属性，用以接收父组件传过来的值

2. 然后父组件中引用子组件，并在子组件标签中添加子组件props中创建的属性

3. 最后把需要传给子组件的值赋给该属性

加深理解：父亲要给儿子 东西，把要给的东西都放在了 桌子上， 这就需要儿子拿个袋子把桌子上的东西装起来，然后自己要用的时候从袋子里拿出来就可以了

东西---父组件传过来的值

桌子---父组件中的子组件标签

袋子---定义的props属性

从袋子里拿出来---在子组件的模板中使用

props：properties的简称

注意：prop 只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。而且 prop 只读，不可被修改，所有修改都会失效并警告。

demo（以组合式API写法为例）：

父组件写法：
子组件写法：

效果图：

子传父

1. 子组件创建并监听自定义事件

2. 在事件函数里面执行emit函数，通过emit把想传的值传给父组件

3. 父组件在子组件上监听emit定义的事件名称并绑定自身的函数，在函数的参数中接收子组件传递的参数

加深理解：儿子要给父亲一块西瓜，把这块西瓜放在了桌子上，并且还在桌子上放了一个保鲜袋，并且提前告诉父亲必须用桌子上的保鲜袋把西瓜装走，要不然坏了就，然后父亲用保鲜袋装好之后，要吃的时候还要再拿个勺子对这个西瓜进行全方位按摩

一块西瓜---子组件传的值

桌子---自定义事件

保鲜袋---事件派发的事件名（父亲必须要用儿子给定的这个事件）

勺子---给派发的事件再定一个处理事件

进行全方位按摩---监听派发事件，对子组件传来的值处理

demo（以组合式API写法为例）：

子组件写法：

父组件写法：

效果图：

非相关组件之间传参

非相关组件之间传参，使用依赖注入(provide & inject)或者 vuex 和 pinia 等状态管理插件
*注意：这里用的是依赖注入---- provide & inject
demo（以组合式API写法为例）：

*上述demo都是用的组合式API，如果要用Vue的选项式API，只需要换个写法即可，但其实传参的原理都是相同的

本次介绍就到这里啦，有什么错误的话请大家多多担待，评论或私聊都可以。