Vue组件传递参数

1.父子组件通信1、props和$emit/$on(1)父组件传递参数给子组件。父组件使用v-bind传值，子组件使用props接收参数（2）子组件向父组件传输数据——自定义事件子组件通过$发出方法。props提供类型检查支持$emit不会修改其他组件的同名事件，只会触发父事件，这里和event-bus不同，多层组件的缺点是需要一层层传递，无法解决多个组件依赖同一个state的问题问题2、$refs,$parent,$children(1)子组件可以使用$parent访问父组件实例，父组件可以通过$children对子组件进行操作。缺点：一个组件的子组件可能不唯一，返回值是一个数组。所以无法确定子组件的顺序。(2)如果ref作用于DOM元素，则引用指向DOM元素；如果作用于子组件，则引用指向子组件实例，可以直接访问子组件的数据，调查子组件的方法。3、.sync修饰符在开发过程中，我们一般使用props/emit来实现双向绑定。为了方便起见，2.3.0版本提供了一个语法糖.sync修饰符。二、兄弟组件通信1、eventBus（中央事件总线）evnetBus的原理是新建一个Vue实例，以及然后通过bus.$emit触发事件，bus.$on监听触发的事件，实现通信和参数传递。初始化总线Vue.prototype.$EventBus=newVue()或者：importVuefrom'vue'exportdefaultBus=newVue()父组件：子组件：`缺点：（1）页面刷新时，相关的eventBus会销毁（2）由于使用了一个Vue实例，并且定义了相同的事件名，所以并没有用off销毁。优点：解决多层组件之间繁琐的事件传播3.代际组件通信1.Provide和injectProvide和inject是成对使用的。效果是允许祖先组件向其所有后代注入依赖项。适用于祖先组件和后代组件之间的通信。无论组件有多深，其上下游关系始终有效。provide选项应该是一个对象或一个返回对象的函数。注入选项应该是一个字符串数组或一个对象。子组件：缺点：子组件获取父组件的状态，父组件无法获取子组件的状态2、$attrs和$listeners$attrs:include排除父组件在子组件上设置的属性，不包括prop、class、style传递的属性。$listeners：包含父作用域中的v-on事件监听器（不带.native修饰符）。也就是说，祖先组件中的事件可以通过$listeners传递给后代组件。祖先组件索引：importchild2from'./child2'exportdefault{components:{child2},props:['attr1'],mounted(){console.log('this.$attrsintheparentcomponent',this.$attrs)console.log('this.$listenersintheparentcomponent',this.$listeners)}}子组件child2:补充：添加属性inheritAttrs，默认情况下，父作用域中不被视为props的属性绑定将“回退”并正常应用于子组件的根元素HTML属性如果不想让组件的根元素继承属性，可以设置inheritAttrs:false。3、vuexvuex是vue提供的状态管理模式。它采用集中式存储来管理所用组件的状态。适用于多组件状态共享和大型项目。优缺点：优点解决了多层组件依赖同一个状态的问题单向数据流缺点页面重新加载时需要重写数据，增加额外的代码量，不适用于简单的业务需求参考文档：$atttr和$listener：https://www.jianshu.com/p/4649d317adfehttps://blog.csdn.net/songxiugongwang/article/details/84001967https://www.jianshu.com/p/a388d38f8c69https://segmentfault.com/a/1190000022708579eventBus:https://segmentfault.com/a/1190000021707081https://zhuanlan.zhihu.com/p/72777951https://juejin.im/post/6844904167597686791#heading-2https://juejin6.im/post/685639://juejin.im/post/6844903977100804103#heading-7https://juejin.im/post/6844904048118726663#heading-21