Vue组件通信的8种方式

前言在公司系统上干了半年，前天终于上线了。后期改BUG的时间太长了。大部分出现的BUG都是前后端信息不对称导致的。逻辑错误不多，用户体验略差。毕竟是第一次做这么大的系统（100w+），通过这个系统的开发，总结了很多经验，如何更好的配合后端人员开发，如何设计为了提高用户体验，我在之前的开发中没有关注这方面，只关注功能实现。这是一个补充。项目上线后，接下来就是后期的维护和更新。最近的时间总算没有以前那么忙了，简单回顾了一下系统。由于项目使用的技术栈是Vue，平时的开发只关注功能实现。接下来深入分析Vue对常用业务组件的封装及Vue源码分析

本章将对Vue组件通信的8种方式进行总结。日常开发组件通信紧密，熟悉组件通信才能更好的进行业务开发。Vue组件之间传值1.父组件传值给子组件。在父组件中引入子组件来注册子组件并在页面上使用。子组件标签上的动态绑定传入的是动态值/静态值。在子组件中，使用props接受父组件传过来的值。子组件接收的父组件的值分为引用类型和普通类型两种：普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）引用类型：数组(Array),object(Object)#父组件由于Vue是单向数据流，子组件不能直接修改父组件的值2.子组件通过绑定事件将值传给父组件，通过this.$emit('函数名',传递参数)#parentComponent#Subcomponent修改父组件的值3.父组件通过$refs/$children$refs获取子组件的值：获取DOM元素和组件实例，获取组件属性和方法。通过在子组件上绑定ref，使用this.$refs.refName。子组件属性/子组件方法$children：当前实例的子组件，返回子组件的集合。如果想获取哪些组件的属性和方法，可以使用this.$children[index]。子组件属性/f方法示例文本组件ExampleText2组件refs//通过$refs例子获取子组件的属性和方法console.log(this.$refs.son.datas)this.$refs.son.getValue()$children//通过$children获取子组件的属性和方法this.$children[0].getValue();//我是Test1this.$children[1].getTest2();//我是Test2console.log(`--------${this.$children[1].datas}`);//我是Test24。子组件通过$parent的属性和方法获取父组件实例exportdefault{name:'test',created(){console.log(this.$parent.obj)this.$parent.getQuery()},},},}5.$attrs和$listeners获取父组件实例属性和方法（用于组件嵌套的情况下）$attrs：包含不考虑的属性绑定（class和style除外）expected)props在父作用域中，并且可以通过v-bind="$attrs"传入内部组件当一个组件没有声明任何props时，它包括所有父作用域绑定（类和样式除外）。$listeners：包含父作用域中的v-on事件监听器（不带.native修饰符）。它可以通过v-on="$listeners"传递给内部组件。它是一个包含所有作用于该组件的事件监听器的对象，相当于子组件继承了父组件的事件。使用场景：用于多层嵌套组件的情况，可以避免使用Vuex进行数据处理。使用v-bind="$attrs"v-on="$listeners"可以很方便的实现业务数据传递。父组件子组件1嵌套子组件6.组件间传值，新建js文件，导入vue，导出vue实例；然后给导出的实例绑定$emit事件，然后通过$on监听触发的事件，这样就可以实现全局组件数据共享使用场景：可以满足任何场景传数据，父子组件传值，子父组件传值，兄弟组件传值，跨级组件传值。当通信数据比较简单时，可以采用这种方案，而且项目比较庞大，可以使用Vuex。vue.js/**@Description:*@Author:张欣*@Date:2021-01-2215:48:56*@LastEditTime:2021-01-2215:51:24*@LastEditors:张欣*/importVuefrom'vue'exportdefaultnewVue()ComponentA组件C7.Vuex这里就不介绍了，我会单独写一篇文章来讲解Vuex8。Provideandinjectimplementparentcomponentstopassingvaluestodescendants(levelsnotlimited)provideandinject这对选项需要配合使用，才能让一个祖先组件给它所有的后代组件注入一个依赖，不管有多深componenthierarchyis,andin它总是从上下游关系建立时开始生效。provide：是一个对象或函数，它返回一个对象，该对象包含可以注入其后代的属性。inject：它是一个字符串数组或一个对象，用于将provide提供的父组件属性注入到子组件或后代组件中。使用场景：provide/inject可以轻松实现父组件数据的跨级访问test'}}#injectinject:['name']父组件子组件子组件<脚本>importSonTwofrom'../son/SonTwo'exportdefault{name:'sonone',components:{SonTwo},inject:['titleFather'],created(){console.log(`${this.titleFather}-----------SonTwo`)},data(){return{title:'我是一个子组件'}},},}结论??关注+点赞+收藏+评论+转发??，原创不易，鼓励作者创作更好的文章