摘要：缺点用这种方法写出来的组件十分难维护，因为你并不知道数据的来源是哪里，有悖于单向数据流的原则拿到的是一个数组，你并不能很准确的找到你要找的子组件的位置，尤其是子组件多的时候。
几种常见的Vue组件间的传参方式
Vue父子组件通讯的方法其实有很多，本文只是做一个总结，说说他们的优缺点，具体如何使用相关文档和网上大神已经总结的很多里，这里就不再说明。
1.Vuex 介绍Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，
并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，
提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
vuex是我平时项目里经常用的工具之一，相信大家在项目中肯定也经常会使用它
使用方法请参考官网传送门
优缺点
优点
解决了多层组件之间繁琐的事件传播。
解决了多组件依赖统同一状态的问题。
单向数据流
为Vue量身定做，学习成本不高
缺点
不能做数据持久化，刷新页面就要重制，要做数据持久化可以考虑使用localstorage。
增加额外的代码体积，简单的业务场景不建议使用。
2.EventBus 介绍通过共享一个vue实例，使用该实例的$on以及$emit实现数据传递。
使用方法下面是简单的使用方法
// bus.js
import Vue from "vue"
export default new Vue({})
// component-a.js
import bus from "./bus.js"
export default {
created () {
bus.$on("event-name", (preload) => {
// ...
})
}
}
// component-b.js
import bus from "./bus.js"
export default {
created () {
bus.$emit("event-name", preload)
}
}
优缺点
优点
解决了多层组件之间繁琐的事件传播。
使用原理十分简单，代码量少。
缺点
由于是都使用一个Vue实例，所以容易出现重复触发的情景，例如：
多人开发时，A、B两个人定义了同一个事件名。
两个页面都定义了同一个事件名，并且没有用$off销毁（常出现在路由切换时）。
在for出来的组件里注册。
项目一大用这种方式管理事件会十分混乱，这时候建议用vuex。
3.props和$emit/$on 介绍最基本的父组件给子组件传递数据方式，将我们自定义的属性传给子组件,子组件通过$emit方法，触发父组件v-on的事件，从而实现子组件触发父组件方法
使用方法props使用传送门
$emit/$on使用传送门
优缺点
优点
使用最为简单，也是父子组件传递最常见的方法。
Vue为给props提供了类型检查支持。
$emit不会修改到别的组件的同名事件，因为他只能触发父级的事件，这里和event-bus不同
缺点
单一组件层级一深需要逐层传递，会有很多不必要的代码量。
不能解决了多组件依赖统同一状态的问题。
Tips$attrs/$listeners可以将父组件的props和事件监听器继承给子元素，在子组件可以调用到父组件的事件和props
$attrs使用传送门
$listeners使用传送门
4.provide/inject 介绍在父组件上通过provide提供给后代组件的数据/方法，在后代组件上通过inject来接收被注入的数据/方法。
使用方法官方传送门
优缺点
优点
不用像props一层层传递，可以跨层级传递。
缺点
用这种方式传递的属性是非响应式的，所以尽可能来传递一些静态属性。
引用官网的话是它将你的应用以目前的组件组织方式耦合了起来，使重构变得更加困难。，我对这句话的理解是用了provide/inject你就要遵循它的组件组织方式，在项目的重构时如果要破坏这个组织方式会有额外的开发成本，其实event-bus也有这个问题。
5.slot 介绍你可以在组件的html模版里添加自定义内容，这个内容可以是任何代码模版，就像：
Your Profile
父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
你也可以通过slot-scope属性来实现从子组件将一些信息传递给父组件，注意这个属性是vue2.1.0+新增的。
使用方法官方传送门
优缺点
优点
可以在父组件里自定义插入到子组件里的内容，虽然其他属性也可以，但是我觉得slot更倾向于自定义的条件是来自于父容器中。
复用性好,适合做组件开发。
缺点
和props一样不支持跨层级传递。
6.$parent/$children 介绍通过$parent/$children可以拿到父子组件的实例，从而调用实例里的方法，实现父子组件通信。并不推荐这种做法。
使用方法通过this.$parent或者this.$children拿到父或子组件实例。官方传送门
优缺点
优点
可以拿到父子组件实例，从而拥有实例里的所有属性。
缺点
用这种方法写出来的组件十分难维护，因为你并不知道数据的来源是哪里，有悖于单向数据流的原则
this.$children拿到的是一个数组，你并不能很准确的找到你要找的子组件的位置，尤其是子组件多的时候。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/99957.html
摘要：组件之间的通讯分为三种父给子传子给父传兄弟组件之间的通讯父组件给子组件传值子组件嵌套在父组件内部，父组件给子组件传递一个标识，在子组件内部用接收，子组件在模板里可以通过的形式进行使用。 组件之间的通讯分为三种 父给子传 子给父传 兄弟组件之间的通讯 1 父组件给子组件传值 子组件嵌套在父组件内部，父组件给子组件传递一个标识，在子组件内部用props接收，子组件在模板里可以通过{{}}的...
摘要：组件之间的通讯分为三种父给子传子给父传兄弟组件之间的通讯父组件给子组件传值子组件嵌套在父组件内部，父组件给子组件传递一个标识，在子组件内部用接收，子组件在模板里可以通过的形式进行使用。 组件之间的通讯分为三种 父给子传 子给父传 兄弟组件之间的通讯 1 父组件给子组件传值 子组件嵌套在父组件内部，父组件给子组件传递一个标识，在子组件内部用props接收，子组件在模板里可以通过{{}}的...
阅读 3321·2021-11-10 11:36
阅读 3207·2021-10-08 10:21
阅读 2819·2021-09-29 09:35
阅读 2365·2021-09-22 16:06
阅读 3895·2021-09-09 09:33
阅读 1286·2019-08-30 15:44
阅读 3144·2019-08-30 10:59
阅读 2958·2019-08-29 15:32
