美文网首页大前端开发
详谈vue父子组件之间通信

详谈vue父子组件之间通信

作者: chenchen125 | 来源:发表于2019-06-26 18:16 被阅读31次

组件是 vue.js最强大的功能之一,但是在实际应用中各个组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。这篇文章主要来介绍vue中父子组件之间怎么传递数据,进行通信。

1.通过prop实现通信(父组件向子组件)

子组件的props选项能够接收来自父组件数据。由于props是单向绑定的,即只能父组件向子组件传递,不能反向。传递的方式可以分为两种:

(1)静态传递

子组件通过props选项来声明一个自定义的属性,然后父组件就可以在嵌套标签的时候,通过这个属性往子组件传递数据了。

(2)动态传递

我们已经知道了可以像上面那样给 props 传入一个静态的值,但是我们更多的情况需要动态的数据。这时候就可以用 v-bind 来实现。通过v-bind绑定props的自定义的属性,传递去过的就不是静态的字符串了,它可以是一个表达式、布尔值、对象等等任何类型的值。

2.通过$emit 实现通信(子组件向父组件)

通过$emit 实现子组件向父组件通信。

vm.$emit( event, arg )

$emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数。

相关文章

  • 详谈vue父子组件之间通信

    组件是 vue.js最强大的功能之一,但是在实际应用中各个组件实例的作用域是相互独立的,这就意味着不同组件之间的数...

  • Vue相关知识点

    1、vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不...

  • Vue组件通信

    Vue 组件之间的通信,通常我们遇到的都是父子组件之间的通信 一、父子组件传参 子组件定义 Props 属性; 父...

  • 【Vue2】组件传值的六种方法

    Vue 组件之间的通信大概归类为: 父子组件通信: props/$emit;ref/refs;$attrs / $...

  • Vue 组件 / 通信

    子组件=》父组件 vue的组件之间的通信类似angular的父子层级之间通信,父组件获取子组件数据步骤大概如下: ...

  • 父子通信

    title: 组件内父子小组件之间的通信date: 2017-03-20 vue组件 技术分享 分享组件内父子小组...

  • Vue组件通信

    总体来说,Vue中组件之间的通信场景如下图: 可以将其分为父子组件通信、兄弟组件通信、跨级组件通信。 1. 自定义...

  • Vue组件通信

    Vue组件通信 Vue组件关系可分为三大类: 父子组件 兄弟组件 跨级组件, 相应的组件之间的通信也分类三大类: ...

  • [Vue]组件之间如何通信?

    组件通信可以大致分为两种情况,父子组件之间的通信和非父子组件之间的通信,下面来分别介绍 一、父子组件之间的通信 1...

  • Vue如何实现组件通信?

    Vue组件通信的三种情况: 父子通信 爷孙通信 兄弟通信 父子通信:父组件使用Prop向子组件传递数据,子组件通过...

网友评论

    本文标题:详谈vue父子组件之间通信

    本文链接:https://www.haomeiwen.com/subject/pbhhcctx.html