专栏首页不止是前端Vue:父子组件信息传递

Vue:父子组件信息传递

组件化开发是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
```js
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会变成一个数组,但建议使用传对象的形式。 现在看看效果

子组件向父组件传参数

methods:{ toParent(){ this.$emit('childMsg',arg); this.count++; } }

子组件不仅能通知父组件,并且能向父组件传递参数,在事件名称的后面添加参数即可。但需要注意的是

<child :total='this.total' @childMsg="parentMethod"></child>```
父组件的HTML模板中仍然只绑定函数名,不能写参数,参数在父组件的方法中获取
```js
parentMethod(arg){ this.total+=arg; }

点击效果

没有点击

此时各组件数据都为0

第1次点击

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

第2次点击

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

第3次点击

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

原理解析

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

小结

子组件通过触发父组件事件达到修改数据的目的。 这里我们仅仅解决了父子组件传值,并且过程繁琐,也没有解决兄弟组件传值问题。处理复杂的通信问题,官方推荐Vuex 就是这样 :)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue:Vue中操作DOM方法

    MrTreasure
  • vuejs深入浅出—基础篇

    一、从HelloWorld说起 任何语言的都是从Hello World开始的,VueJs也不例外,直接上代码: <script src="https://unp...

    王磊的博客
  • 2018 我所了解的 Vue 知识大全

    腾讯NEXT学位
  • Vue:一个空白的Vue项目,开箱即用

    MrTreasure
  • 从Vue.js窥探前端行业

    近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的;IE9+、chrome、sarafi、fi...

    牧云云
  • Vue:牛刀小试 Vue社区API

    MrTreasure
  • 药药切克闹!用酷炫的vue~制作酷炫的menu~

    腾讯NEXT学位
  • Vue:(1)从80%搭建个人管理后台

    MrTreasure
  • 必备!十款 Chrome 编程扩展工具,你少了哪个?

    腾讯NEXT学位

扫码关注云+社区

领取腾讯云代金券