Vue组件通信实践记录（推荐）

组件通信

几乎所有的mvvm框架中都要涉及组件通信的功能（吐槽一下knockout,毕竟是鼻祖就先不说它了）。而且目前的前端形式来看，组件化是一个项目的基础。所以选好一个合适的框架后，随着组件的不断增加，业务的复杂度提升，组件之间的通信变得尤为重要。

实践方法

由于更换新的框架，我们的项目由Avalon更新成Vue.但是为了兼容以前的业务代码，不能直接使用vue的标准实践方式，我还是拿过来后封装了一个vue的class,具体业务里面不影响使用，封装的过程之后写出来再聊吧，下面来总结一下最近用到的通信实践方法。

1.父组件是通过props传递数据给子组件

vmodel 中包含了两个子组件

<div class="w-base">
  <book-component v-bind:bookdata="book"></book-component>
</div>

<div class="base">
  <node-component v-bind:catalog="catalog" ></node-component>
</div>

在上面这段代码中我们可以看到，定义了两个子组件，并且使用指定v-bind指令传递了数据，子组件会接收到传递的数据。

Vue.component('book-component', {
 template: tpl,//可以传进来子组件的模板文件
 props: ['book'],
 data: function () {
  return { myBook: this.bookdata }
 }
})

建议接收到单向的props数据后，定义一个局部变量来初始化使用。

2.父组件与子组件之间通信的其他方式

vue中给实例提供了三个我们可用的API $children 和 $refs 以及 $parent 。

$children ：当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。

$refs ：包含了当前实例所有拥有 ref 注册的子组件的对象.

$parent : 当前实例的父实例。

所以说，如果在通信方面我们我组件想要调用子组件，能用的方法只有 $refs 了，因为 $children 是一个数组，并且不保证顺序，也没有相关的id去寻找我们需要的那个特定子组件。但是如果使用 $refs 去寻找特定子组件，那就必须要给那个子组件注册 ref 。

父组件的模版

<!-- vm.$refs.child will be the child comp instance -->
<child-component ref="child"></child-comp>

父组件

//找到子组件并且调用它的方法
var myChild = this.$refs.child;
mymyChild.func();

子组件

//找到父组件并且调用它的方法
var myParent = this.$parent;
mymyChild.func();

3.平行组件之间的两种通信方式

a.官方提供的事件bus

var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
 // ...
})

b.通过父组件去找兄弟组件

//找到父组件的$refs对象，然后找到组件的兄弟组件
 var $refs = this.$parent?this.$parent.$refs:{};
 var childComponent = $refs.child; //child为改组件的ref属性值

其实以上两种方法最好的实践方式是封装到项目的基类中，这样不用每次都去定义一个空Vue()实例，而是每个实例的基类中都有这个事件bus。同样可以封装找到其他兄弟组件的方法，但是该兄弟组件必须注册ref

下面这个方法是我在项目中封装的用于找到父组件，然后再去找到兄弟组件的方法。

//平行组件之间的通信
getComponentByRef: function(refId) {
  var $refs = this.$parent?this.$parent.$refs:{};
  for (var $id in $refs) {
    if ($id == refId) {
      return $refs[$id];
    }
  }
  return null;
}

使用

//在组件中直接使用
this.getComponentByRef("booknode").updateNode(this.node);

4.组件间复杂数据通信Vuex

一说到vuex，很多刚开始接触vue的人会主动避免去使用它，其实它并没有想象中的那么复杂。最好的开始是引入vuex后，走一遍给出的小示例。但是如果你的项目并不复杂的话，可以不考虑状态管理，那么什么时候需要使用状态管理呢？

我们来看这样一个布局

如果component1中的某个数据变更，那么com2,com3也要跟着更新，此时com3中又细分为了三个小组件。

问题：

  1. 多个试图依赖同一个状态
  2. 多层嵌套的组件，数据变更和代码维护困难

那这样的情况时，我们可以考虑使用状态管理。下一篇文章将详细讲解关于vuex的实践和理解。

写在最后的总结

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 深入探讨Vue.js组件和组件通信

    基本是按照官网的 Guide 全部梳理了一遍:http://vuejs.org/guide/index.html 这里我们以一个 Todo List 应用为例来把相关的只是都串起来,这篇里面的全部代码都在github上 https://github.com/lihongxun945/vue-todolist  Vue 实例 一个 Vue 应用是由一个 root vue instance 引导启动的,而 Vue instance 是这么创建的: var vm = new Vue({ // opti

  • Vuejs第十篇之vuejs父子组件通信

    本篇文章是小编结合官方文档整理的一套更加细致,代码更多更全的教程,非常不错,比较适合新手阅读. 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 父子组件通信 ①访问子组件.父组件.根组件: this.$parent 访问父组件 this.$children 访问子组件(是一个数组) this.$root 根实例的后代访问根实例 示例代码: <div id="a

  • 详解vue组件通信的三种方式

    1. 第一种方式就是官方推荐的 官方推荐方式 有时候两个组件也需要通信(非父子关系).在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线. 本质是通过派发事件然后监听事件从而更改值,(父子组件通信也可用这个方式,但是不同的一点就是父子组件通信的时候可以不用一个空的Vue实例来做中转,这种方式我这里就不做演示的了,因为我的题目是非父子通信) 空的Vue实例 bus import Vue from 'vue' const bus = new Vue() export default bu

  • Vue2.x中的父子组件相互通信的实现方法

    Vue2.x中的父子组件相互通信的实现方法

    业务场景:(这里指的是直接父子级关系的通信) 美女(子组件)将消息发送给大群(父组件) 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件) 父组件 template <template> <div> <p>群消息girl:</p> <div> {{ somebody }} 说: 我 {{ age }} 了. </div> <hr> <v-girl-group :girls="aGirls"

  • 详解vue2.0组件通信各种情况总结与实例分析

    Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用props传递数据---组件内部 //html <div id="app1"> <i>注意命名规定:仅在html内使用my-message</i> <child my-message="组件内部数据传递"></child> </div> //js

  • 详解Vue组件之间的数据通信实例

    详解Vue组件之间的数据通信实例

    最近在用vue做项目,学习了不少东西,但是有时候光顾着做项目却忘记要找个时间来整理一下最近的一些学习新得,因为是新手,所以可能会有错误的地方,欢迎指出和交流呀~~~ 关于父子组件以及非父子组件之间的数据通信 1 父子组件之间数据通信 一般父组件向子组件传递数据用prop进行传递,注意,子组件不能对prop中的数据进行更改,vue中规定是防止子组件对父组件中的数据进行窜改.而子组件向父组件进行数据传递则可以通过事件触发父组件的事件来实现数据的传递.(是不是有点懵逼了,看个例子吧 ) (这里我就直接

  • Vue 父子组件、组件间通信

    本人对Vue组件间通信不懂,搜索了很多关于Vue 父子组件间通信介绍,下面我来记录一下,有需要了解Vue 父子组件.组件间通信的朋友可参考.希望此文章对各位有所帮助. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> <meta name="viewport"

  • vue2.0父子组件及非父子组件之间的通信方法

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arr

  • vue组件间通信解析

    组件间通信(父子,兄弟) 相关链接\组件通信:点击查看 学习链接:Vue.js--60分钟快速入门点击查看 分分钟玩转Vue.js组件点击查看 父组件传子组件 父传子方法(一) 属性传递 props //子组件 <template> <ul> <li v-for="item in dataList">{{item}}</li> </ul> </template> <script> export defa

  • Vue组件通信实践记录（推荐）

    Vue组件通信实践记录（推荐）

    组件通信 几乎所有的mvvm框架中都要涉及组件通信的功能(吐槽一下knockout,毕竟是鼻祖就先不说它了).而且目前的前端形式来看,组件化是一个项目的基础.所以选好一个合适的框架后,随着组件的不断增加,业务的复杂度提升,组件之间的通信变得尤为重要. 实践方法 由于更换新的框架,我们的项目由Avalon更新成Vue.但是为了兼容以前的业务代码,不能直接使用vue的标准实践方式,我还是拿过来后封装了一个vue的class,具体业务里面不影响使用,封装的过程之后写出来再聊吧,下面来总结一下最近用到的

  • vue组件通信传值操作示例

    本文实例讲述了vue组件通信传值操作.分享给大家供大家参考,具体如下: 父子组件通信: 子组件 <template> <div> <h3 @click="alerrt"> 我是子组件一</h3> <span>{{parentMessage}}</span> </div> </template> <script> export default{ props: ['parentMes

  • Vue组件通信方法案例总结

    目录 一.父组件向子组件传值(props) 二.子组件向父组件传值($emit) 三.兄弟组件传值(EventBus) 1. 初始化(new Vue()) 2. 发送事件($emit()) 3. 接收事件($on()) 4. 移除事件监听者 四.Vuex 一.父组件向子组件传值(props) 步骤: 在父组件中通过 v-bind 将数据传给子组件 在子组件中通过 props 接收父组件传递过来的数据 <div id="app"> <!-- 1.通过 v-bind 将数

  • vue 组件通信的多种方式

    vue 组件通信的多种方式

    目录 前言 一.vuex 二.eventBus 三.props/emit 四.$parent/$children 五.$attrs/$listeners 六.provide/inject 前言 在vue中,​ 组件的关系不外乎以下三种: 组件是需要通信的,在开发中,常用到的通信方式有:vuex.eventBus.以及props与emit.$parent与$children,除此之外,还有provide与inject.$attrs与$listeners等. 一.vuex 这个相信大家用的很多了,简

  • Vue组件之间的通信方式(推荐!)

    Vue组件之间的通信方式(推荐!)

    目录 一.组件间通信的概念 二.组件间通信解决了什么 二.组件间通信的分类 三.组件间通信的方案 props传递数据 $emit 触发自定义事件 ref EventBus parent或parent 或parent或 root attrs与attrs 与attrs与 listeners provide 与 inject vuex 小结 总结 一.组件间通信的概念 开始之前,我们把组件间通信这个词进行拆分 组件 通信 都知道组件是vue最强大的功能之一,vue中每一个.vue我们都可以视之为一个组

  • Vue组件通信深入分析

    Vue组件通信深入分析

    目录 一.组件间的通信方式分类 二.props传递数据 三.$emit 触发自定义事件 四.ref标记 五.EventBus事件总线 六.$parent 或 $root 七.vuex 八.总结 一.组件间的通信方式分类 父子组件之间的通信: 兄弟组件之间的通信: 祖孙与后代组件之间的通信: 非关系组件之间的通信. 二.props传递数据 适用场景:父组件传递数据给子组件: 子组件设置props属性,定义接收父组件传递过来的参数: 父组件在使用子组件标签中通过字面量来传递值 Person.vue

  • Vue组件通信之父传子与子传父详细讲解

    目录 父组件传递给子组件 浅谈Props 子组件传递给父组件 父组件传递给子组件 父组件传递给子组件:通过props属性: 子组件传递给父组件:通过$emit触发事件: 这里我们知道,父组件有一些数据需要子组件来进行展示,那我们可以通过props来完成组件之间的通信 通过props来完成组件之间的通信 浅谈Props 那么什么是Props呢? 作用:接受父组件传递过来的属性 Props是你可以在组件上注册一些自定义的attribute(属性): 父组件给这些attribute(属性)赋值,子组件

  • Vue组件通信之Bus的具体使用

    Vue组件通信之Bus的具体使用

    关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里. 在vue2.0中 $dispatch 和 $broadcast 已经被弃用.官方文档中给出的解释是: 因为基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱.这种事件方式确实不太好,我们也不希望在以后让开发者们太痛苦.并且$dispatch 和 $broadcast 也没有解决兄弟组件间的通信问题. 官方推荐的状态管理方案是 Vuex.不过如果项目不是很大,状态管理也

  • Vue组件通信的四种方式汇总

    前言 众所周知vue是一种mvvm框架,它相对于jquery可能比较大的差异点之一就在于组件之间的通信了.本文重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白. 父子组件的通信 非父子组件的eventBus通信 利用本地缓存实现组件通信 Vuex通信 第一种通信方式:父子组件通信 父组件向子组件传递数据 父组件一共需要做4件事 1.import son from './son.js' 引入子组件 son 2.在componen

随机推荐