Vue 父子组件传值有哪些方式

① Props

父组件向子组件传递数据是通过 props 传递的； 

在父组件中通过 v-bind 绑定子组件的属性，子组件中通过 props 接收父组件传递的数据。

这是一种单向数据流的方式，父组件可以向子组件传递数据，但是子组件不能直接修改传递过来的数据，需要通过触发事件的方式通知父组件进行修改。

其中，Props是最常用的一种方式，因为它不仅可以实现数据的传递，还可以进行数据类型检查和默认值设置，使得数据的传递更加稳定和安全。 

 

② 事件 

子组件传递数据给父组件是通过 $emit 触发自定义事件，$emit 第二个参数为传递的数值；

子组件通过 $emit 方法触发父组件的自定义事件，父组件中通过 $on 监听事件并接收参数，从而实现数据的传递。

这也是一种单向数据流的方式，父组件通过事件向子组件传递数据，子组件可以通过触发事件的方式通知父组件进行修改。

 

③ $parent / $children

通过访问父组件或子组件的实例属性来实现数据的传递。

但是这种方式不够直观且容易出现问题，因为父组件或子组件的实例属性可能会在不同的组件结构中发生变化

 

④ $refs

通过在父组件中使用 ref 属性来获取子组件的实例，从而可以直接访问子组件的属性和方法。

这种方式也不够直观，且容易出现问题，因为在组件结构复杂的情况下，$refs可能会变得混乱。

⑤ provide 和 inject

① 父组件中通过 provide 来提供数据，然后在子组件中通过 inject 来注入数据。

② 不论子组件有多深，只要调用了 inject 那么就可以注入 provide 中的数据。而不是局限于只能从当前父组件的 prop 属性来获取数据。只要在父组件的生命周期内，子组件都可以调用

适用场景：祖先传递数据给子孙

过程：在祖先组件定义 provide 属性，返回传递的值​​​​​​​。在后代组件通过 ​​​​​​​inject 接收组件传递过来的值

需要注意的是，provide 和 inject 方法并不是响应式的，也不会进行深度监听，因此在使用时需要注意数据的变化和更新。同时，provide 和 inject 方法只能在父组件和子组件之间进行数据的传递和共享，而无法在兄弟组件之间进行数据的共享。