组件通讯----基于Vue和PHP打造前后端分离的通用管理系统(八)

父子组件间的通讯,其实很简单,在前文好多地方都涉及到了,只是没有专门提及。
不过,组件通讯里边有个坑,帮大家绕一绕。

App组件和Aside(menu)组件,Aside组件通过App组件控制内容区显示,最适合展示这个内容。

先来看前面提过的一张图:


组件交互.PNG

我们就其中的虚线一部分进行分析:

  • 父组件通过【props】与子组件通讯
  • 子组件通过【事件】向父组件传递信息

显而易见的,父组件通过props可以控制子组件显示的内容,子组件通过发送事件,父组件响应事件,改变自身。这么简单,当然没什么说的。关键是“坑”。
在说坑前,先说这种父子通讯模式的的限制

  • 平行组件间的通讯受限制。可以通过一条通讯总线,把同级别间的组件挂在总线上通讯。
  • 爷孙组件通讯,还得麻烦父组件,倘若祖父和从孙呢,倘若...
    第一个问题,有vuex,麻烦一点就是了。这种其实可以通过设计模式避免。
    第二个问题,ElementUI给出一个办法,可以参考'element-ui/src/mixins/emitter'这种广播模式。当然这种广播模式也能解决第一个问题。有点怪怪的就是了,不太符合代码洁净的原则。我们后面会和这个东西打交道,这里先提一下。
    下面通过代码看《坑》:(这段代码不能直接运行!!!了解意思得了)

当父组件响应事件时,可能给自己添加新属性,这时候会出现问题。

/* 子组件 **/
{
  template: '<div @click="onClick">{{value}}</div>',
  props: ['name', 'value'],
  // ...
  methods: {
    onClick() {
      this.$emit('add', this.name, Math.random());
    },
  },
}

/* 父组件 **/
{
  template: '<child name="name" :value="values['name']" @add="onAdd">';
  // 更一般的情况是,values来自props,同时爷组件甚至没有给values传递值
 data {
    return {
      values: undifined;
    };
  },
  // ...
  methods: {
    onAdd(name, value) {
      // 悲剧再这里发生
      this.values[name] = value;
    },
  },
}

悲剧出现了,单击后,什么也没发生...,不是应该每次换一个随机数吗?父组件通过props控制不了子组件了?
问题跃然纸上了:

vue文档有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

在我们的这套系统中,这个问题后面会碰到的。添加新属性的坑大家都能绕过,但是祖孙三个组件混在一起,通讯混在一起,就不太起眼了,成了陷阱。解决办法是$set:this.$set(this.values, name, value);

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,790评论 25 709
  • 本文章是我最近在公司的一场内部分享的内容。我有个习惯就是每次分享都会先将要分享的内容写成文章。所以这个文集也是用来...
    Awey阅读 9,488评论 4 67
  • 此文基于官方文档,里面部分例子有改动,加上了一些自己的理解 什么是组件? 组件(Component)是 Vue.j...
    陆志均阅读 3,870评论 5 14
  • 序 今年大前端的概念一而再再而三的被提及,那么大前端时代究竟是什么呢?大前端这个词最早是因为在阿里内部有很多前端开...
    一缕殇流化隐半边冰霜阅读 11,293评论 19 92
  • 2017.08.22 晚安「咖啡冥想」 咖啡冥想是星巴克四步驟中最重要的一步,為種子施肥灌溉,幫助種子不用等到多年...
    珍珠手链阅读 187评论 0 0