福建网站开发公司,企业网页制作方案,平湖网站改版,网站安全检测父子
A 组件与 B 组件之间的通信#xff1a; #xff08;父子组件#xff09; 如上图所示#xff0c;A、B、C三个组件依次嵌套#xff0c;按照 Vue 的开发习惯#xff0c;父子组件通信可以通过以下方式实现#xff1a;
A to B 通过props的方式向子组件传递#xff0c…父子
A 组件与 B 组件之间的通信 父子组件 如上图所示A、B、C三个组件依次嵌套按照 Vue 的开发习惯父子组件通信可以通过以下方式实现
A to B 通过props的方式向子组件传递B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现 通过设置全局Vuex共享状态通过 computed 计算属性和 commit mutation的方式实现数据的获取和更新以达到父子组件通信的目的。 Vue Event Bus使用Vue的实例实现事件的监听和发布实现组件之间的传递。 往往数据在不需要全局的情况而仅仅是父子组件通信时使用第一种方式即可满足。
跨多级
A 组件与 C 组件之间的通信 跨多级的组件嵌套关系 如上图A 组件与 C 组件之间属于跨多级的组件嵌套关系以往两者之间如需实现通信往往通过以下方式实现
借助 B 组件的中转从上到下props依次传递从下至上$emit事件的传递达到跨级组件通信的效果 借助Vuex的全局状态共享 Vue Event Bus使用Vue的实例实现事件的监听和发布实现组件之间的传递。
问题
显然第一种通过props和$emit的方式使得组件之间的业务逻辑臃肿不堪B组件在其中仅仅充当的是一个中转站的作用。如使用第二种 Vuex的方式某些情况下似乎又有点大材小用的意味仅仅是想实现组件之间的一个数据传递并非数据共享的概念。第三种情况的使用在实际的项目操作中发现如不能实现很好的事件监听与发布的管理往往容易导致数据流的混乱在多人协作的项目中不利于项目的维护。
解决方案
在ABC父子孙三个组件中子组件及B中代码类似下面这样
templatediv classchild-1pin child1:/ppprops: {{pChild1}}/pp$attrs: {{$attrs}}/phr!-- C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 --!-- 通过v-bind 绑定$attrs属性C组件可以直接获取到A组件中传递下来的props除了B组件中props声明的 --child2 v-bind$attrs v-on$listeners/child2/div
/template
scriptimport Child2 from ./Child2.vue;export default {props: [pChild1],data () {return {};},inheritAttrs: false,components: { Child2 },mounted () {this.$emit(test1);}};
/scriptv-bind属性$attr,保证C组件能够获取到A组件传递下来的props(除props属性中声明的属性以外) 而v-bind属性$listeners则保证C组件能直接调用A组件的方法。 更多专业前端知识请上
【猿2048】www.mk2048.com
