vue的父子间通信

作者: power__c081 | 来源:发表于2017-03-01 09:59 被阅读516次

闲话不多说,直接上干货,大家在vue的项目中肯定也会遇到需要父子间通信的问题,在这里给大家提出三种父子间通信方式

一.父组件调用子组件方法

如果调用子组件的方法,需要先给在父组件中引用的子组件添加一条索引值,本人就以自己的代码为例

图1

图1中v-ref为父组件给子组件定义的一个索引值

图2

图2中的this.$refs就是用来父组件找索引的方法 找到的索引为child的子组件并执行子组件中的namesearch方法

二.子组件进行到某一步时告诉父组件

图3

图3中是在子组件中执行的事件执行了这个事件的时候告诉父组件,并传递了一个参数即this.assbo

图4

如图4中所示图三中的increment即为父组件中的一个自定义事件

图5

图5中即为父组件通过自定义事件获取到了子组件传的参数

三.子组件进行到某一步时告诉父组件(另一种方法)

图6

图6为在子组件中执行到某一步通知父组件,并传递一个参数

图7

图7为父组件的events的周期里 倾听子组件发来的消息并获取到了相应的参数

以上就是本人所用到的三种通信方式,不喜勿喷,因为都是以真实项目为例子 希望可以帮助到大家。

相关文章

  • vue组件间通信的一些实用方法(VUE2.x)

    vue组件间通信的一些实用方法(VUE2.x) 一、父子组件间通信 常用的父子组件通信方法,一般涉及props和$...

  • Vue父子间通信

    1.父组件向子组件传值 父组件: 子组件: 2.子组件向父组件传值 父组件: 子组件: 3.父组件调用子组件的方法...

  • vue的父子间通信

    闲话不多说,直接上干货,大家在vue的项目中肯定也会遇到需要父子间通信的问题,在这里给大家提出三种父子间通信方式 ...

  • vue 组件通信方式 ,父子、隔代、兄弟 三类通信,六种方法

    Vue 组件间通信只要指以下 3 类通信:父子组件通信、隔代组件通信、兄弟组件通信,下面分别介绍每种通信方式且会说...

  • Vue相关知识点

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

  • Vue 父子组件间通信

    父子组件通信 首先说一下父子组件。 比如一个页面有三部分组成,如下所示, 在 Vue 开发中对应有一个 APP 组...

  • vue父子组件间通信

    父子通信目前有四种方式: 1.父组件传递数据给子组件父组件数据如何传递给子组件呢?可以通过props属性来实现父组...

  • vue.js系列三:组件间通信

    1.组件间通信基本原则 2.vue 组件间通信方式 2.1组件间通信 1: props(适用于父子组件传递属性) ...

  • $emit 和$event 组件通信的一些理解

    今天还在学习Vue。对于父子组件之间的通信还有一些地方没有弄清楚。父子组件间通信可使用props, ref这几个...

  • vue第七节

    Vue里组件的通信 通信:传参、控制(A操控B做一个事件)、数据共享 模式:父子组件间、非父子组件 父组件可以将一...

网友评论

    本文标题:vue的父子间通信

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