Vue2.x:父子组件信息传递

Web前端 来源:Mr_Treasure 55℃ 0评论

组件化开发是Vue的特色,同时也是未来前端开发的趋势,组件的相互调用也产生了组件沟通问题。在Vue1.X中我们使用$dispatch和$broadcast处理组件沟通问题,但是因为

因为基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱。Vue官方

因此这里我们也只讨论父子组件通信问题,并且忽略了CSS(我写的很丑。将就看吧 /滑稽)

父组件HTML

<div id="app">
    <div class="box-wrapper" >
      <div class="box">{{total}}</div>
      <div class="child-wrapper">
        <child :total='this.total' @childMsg="parentMethod"></child>
        <child :total='this.total' @childMsg="parentMethod"></child>
      </div>
    </div>
</div>

请自动忽略wrapper,我们在父组件中创建了box显示父组件的计数器total,创建了两个子组件child。请注意

<child :total='this.total' @childMsg="parentMethod"></child>

我们用:total='this.total' 将total传递给了子组件。这里this.total是我们要传递给子组件的值(可以省略this,这里为了区分我加上;),total是子组件将要得到的值,切记,这里我们使用了 :total 方法即v-bind:total。@childMsg是绑定的事件名称,方法是parentMethod,说明这是父组件的方法

父组件JavaScript

export default {
  name: 'app',
  data(){
    return{
      total:0
    }
  },
  components: {
    child
  },
  methods:{
    parentMethod(){
      this.total+=1;
    }
  },
}

组件本身的属性total,注册组件child(当然你需要先import),methods
parentMethod,当事件childMsg发生时使用的方法

子组件HTML

<div class="child">
    <div class="child-box" @click="toParent">
      <div>父组件的值:{{total}}</div>
      <div>子组件的值:{{count}}</div>
    </div>
  </div>

一个box里面装了两个box,第一个是父组件传来的值total,一个是本身的值count,并且绑定了click事件,执行方法为toParent

子组件JavaScript

export default {
  data(){
    return{
      count:0
    }
  },
  props:{
    total:{
      type:Number,
    }
  },
  methods:{
    toParent(){
      this.$emit('childMsg');
      this.count++;
    }
  }
}

data里是本身的count值,props里声明父组件传过来的值,并且声明基本类型(也可以不用声明),注意此时props是一个对象,还有一种传参方式是传字面量,此时props会变成一个数组,但建议使用传对象的形式。
现在看看效果

点击效果


没有点击


此时各组件数据都为0


第1次点击

点击第一个组件,父组件的值发生变化,并且动态响应到了第二个组件


第2次点击


点击第二个组件,父组件仍然法生变化,并且动态响应到了第一个组件


第3次点击


两个组件的值并没有相互影响,是两个实例,得益于data是中的值是以函数返回的形式。

原理解析

父组件传递给子组件想必不用说了吧,响应也是基于数据驱动进行响应的。
子组件传递给父组件,先是子组件响应自身的click事件,在执行过程中通过this.$emit('childMsg')触发父组件注册的事件,再又父组件自身的parentMethod处理数据。

小结

子组件通过触发父组件事件达到修改数据的目的。并不能直接修改,甚至传值给父组件。那么有没有方法能让子组件直接修改父组件的值呢?相信强大的JS没有什么事情干不出来吧,然而我要告诉你
没有
没有
没有
/坏笑 即使有也不推荐使用,因为父组件不应该对子组件产生依赖,要尽可能的解隅。
这里我们仅仅解决了父子组件传值,并且过程繁琐,也没有解决兄弟组件传值问题。处理复杂的通信问题,官方推荐Vuex
就是这样 :)