vue组件之间的通信

作者: 小强不是蟑螂啊 | 来源:发表于2018-08-30 10:29 被阅读484次

vue之间通信也挺简单的,用到的场景挺多的,简单说下。

1 父组件向子组件传递数据

子组件在父组件的并作为标签引入,通过设置标签的属性传递数据,在子组件用props接受,,例如下面这样,父组件parent.vue引入子组件child.vue,将父组件的数据name通过设置标签child的name属性传递给子组件,子组件通过props传递接受,接受后,在子组件内this.name就是父组件的name数据。

parent.vue:

parent.vue

child.vue:

child.vue

2 子组件向父组件传递数据

    子组件通过$emit方法传递数据,emit第一个是事件,后面的是传递的参数,父组件在子组件的标签接受方法并处理

child.vue

child

parent.vue

parent

3 父组件调用子组件的方法

子组件需要根据父组件的方法进行处理,通常会写一个方法。在父组件数据变动的情况下,就需要调用子组件的方法。我们可以在父组件内将子组件通过哟ref注册,然后用$refs调用子组件的方法

parent

4 兄弟组件传递数据

可以通过子组件a用$emit触发,在子组件b的mounted阶段用$on接收处理。还可以通过组件a通过$emit触发,父组件接受,然后调用子组件b的方法去修改组件B里的值。兄弟组件我基本上没用到,就不上图了。

相关文章

  • vue组件之间通信

    vue 组件之间通信 vue组件之间通信方式: 1.父组件通过props向下传数据给子组件,子组件通过$emit事...

  • 老生常谈——vue组件之间通信

    老生常谈的组件之间通信 vue组件之间的通信细分为三种情况:兄弟组件之间的通信,父组件向子组件传递数据,子组件向父...

  • Vue.js--组件通信

    vue组件之间的通信包括三种: 1.父组件向子组件通信 2.子组件向父组件通信 3.同级组件之间的通信 首先,看一...

  • Vue相关知识点

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

  • Vue 组件 / 通信

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

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

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

  • Vue组件通信

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

  • Vue.js基础(二)

    1. 组件之间的通信 向子组件中传递 number=99 子组件a.vue中 执行效果 2. 组件之间的通信 - ...

  • Vue组件通信

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

  • Vue组件通信

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

网友评论

  • Aiibai:vuex也可以作为兄弟组件的一种通信方式

本文标题:vue组件之间的通信

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