脚本宝典收集整理的这篇文章主要介绍了一个代码仓库，理解 Vue 项目中组件之间的通信，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

父组件传给子组件：

1、props 方式：
父组件通过 Prop 向子组件传递数据（推荐使用）
项目中访问路由：http://localhost:8080/parent_to_child/props

2、slot 方式：
父组件通过 v-slot 设置值，子组件通过带 name 的 slot 接收值（推荐使用）
项目中访问路由：http://localhost:8080/parent_to_child/slot

3、refs 方式：
父组件通过 ref 设置子组件的值（可以使用）
项目中访问路由：http://localhost:8080/parent_to_child/refs

4、$children 方式：
父组件通过 $children 设置子组件的值（$children 并不保证顺序，开发者不应该依赖子组件的顺序，也不是响应式的）（节制使用）
项目中访问路由：http://localhost:8080/parent_to_child/children

子组件传给父组件：

1、自定义事件方式：
父组件通过 v-on 监听子组件的事件，然后父组件使用子组件触发事件抛出的值（本例中，值是一个1到100之内的随机数）
项目中访问路由：http://localhost:8080/child_to_parent/v-on_emit

2、子组件直接修改父组件传来的 prop
子组件可以直接修改父组件传来的引用类型 prop；子组件直接修改接收的基本类型 prop，会报错（如果一定要这样做，以 update:myPropName 的模式触发事件实现，即.sync 修饰符方式）
项目中访问路由：http://localhost:8080/child_to_parent/child_component_change_prop

3、.sync 修饰符 方式：
子组件修改父组件传来的 prop，然后 emit 一个 update 事件，父组件监听该事件并更新自己的 prop（是自定义事件的语法糖）
项目中访问路由：http://localhost:8080/child_to_parent/sync_emit_update

4、$parent 方式：
子组件通过 $parent 设置父组件的值（节制使用）
项目中访问路由： http://localhost:8080/child_to_parent/parent

github 仓库地址：https://github.com/cag2050/co...

脚本宝典总结

以上是脚本宝典为你收集整理的一个代码仓库，理解 Vue 项目中组件之间的通信全部内容，希望文章能够帮你解决一个代码仓库，理解 Vue 项目中组件之间的通信所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。