专栏首页coding个人笔记Vue父子组件通信

Vue父子组件通信

Vue开发,父子组件之间通信很常用,有传数据的,有调用方法的,有子组件操作父组件,也有父组件操作子组件,今天就简单说一下几个父子组件之间通信的方法。

父组件传递数据给子组件一般都是用props,

父组件:<spec :goods="goods"></spec>

子组件接收:props: ['goods'],跟data同级。

goods是子组件接收的键值,当你要传父组件data里面的数据的时候就需要bind,子组件接收的就是父组件data里面的goods数据,如果不需要可以直接

<spec goods="goods"></spec>这时候子组件接收的就是一个字符串goods。

父组件理论上改变子组件是通过改变传递数据,那么这时候就要使用v-if来控制显示隐藏,用v-if控制子组件会重新渲染,props数据也就会重新渲染。要是子组件直接是一直显示,我能想到的只能是调用子组件方法然后传参。

父组件调用子组件方法,要先给子组件加个ref属性,

<headCom ref="CartNum"></headCom>,然后父组件调用this.$refs.CartNum.getCartNum()

getCartNum()是子组件里面的方法。如果要改变子组件数据可以在getCartNum()方法里传递参数,子组件自己改变页面数据。

子组件获取了父组件传递过来的数据之后,是不能直接按照当前修改data里面的数据修改,防止父组件状态被改变了。如果子组件要改变传递过来的数据,可以在子组件这边再声明一个数据

props: ['goods'],
data() {
    return {
      skus: this.goods,
}
},

这样子组件就可以随便修改数据,要是父子组件数据要同步,可以使用

this.$parent.specFlag = false; specFlag是父组件data里面的数据

还有一种方法就是调用父组件的方法,跟父组件改变子组件数据一样,通过方法。

<spec @refleshCartNum ="refleshCartNum"></spec>父组件引用子组件 this.$emit('refleshCartNum');子组件调用

@refleshCartNum也可以用:refleshCartNum,我们用@refleshCartNum是为了区分数据和方法,而且在子组件是不需要再props里面接收方法。

this.$emit('refleshCartNum');里面的'refleshCartNum'就是@refleshCartNum这个键值,跟数据传递一样。

然后="refleshCartNum"这里的refleshCartNum是父组件的方法,在子组件里面某个方法里触发this.

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-07-05

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue组件之间传值

    这个方法应该是最常用的,父组件通过bind指令传给子组件,子组件通过跟data同级的props数组接收。

    wade
  • Vuex使用场景

    最近本着学习的心态,拉取了公司大佬最新架构的vue项目好好研究一番。然而在vuex的使用上本人出现了很大的歧义。到底什么场景使用vuex?于是搜集了一些资料,但...

    wade
  • Vue插槽slot

    使用了那么久的vue,到现在才知道vue自带的组件插槽slot,说真的,插槽的作用在一些场景下非常有用。

    wade
  • CreatorPrimer|组件编码心得(上)

    Cocos Creator的核心是组件化,如何编写出高质量的组件代码值得程序员们不断探索,Shawn今天分享一点组件编码的心得供大家参考:“怎样才是一个合格的组...

    张晓衡
  • 微信小程序组件调用和传值

    微信小程序像Vue和React一样赋于了组件的开发能力,支持组件的调用和传值,同时由于小程序上传时限制在2MB以内,对于稍微大一点的小程序组件的使用就特别重要了...

    越陌度阡
  • vue父组件传字符串到子组件不需要写 v-bind 绑定或语法糖 :

    跟着阿笨一起玩NET
  • 代码组件 | 我的代码没有else

    前端大行组件化的当今,我们在写后端接口代码的时候还是按照业务思路一头写到尾吗?我们是否可以思索,「后端接口业务代码如何可以简单快速组件化?」,答案是肯定的,这就...

    用户1093396
  • vuejs中的组件以及父子组件间通信传值

    您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式.以及什么是组件,如何定义和使用组件,父子组件之间如何...

    itclanCoder
  • 在小程序中调用API在小程序中自定义弹窗组件

    表明它是一个组件,我们称之为“子组件” 3. 注意:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。(只使用class)

    九旬大爷
  • vue父子组件通信以及非父子组件通信的方法

    组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系,父子关系、兄弟...

    青年码农

扫码关注云+社区

领取腾讯云代金券