1、组件跨层级访问

（1）$emit

严格按照单项数据流的规范来说，直接从子组件去修改父组件是不被允许的，但我们可以通过emit事件来通知父级组件进行相应的修改。在每一层都进行emit，这个过程很是枯燥和乏味，而且一旦传错，排查起来也不方便。

（2）$root 、 $parent、$refs

子组件可以通过$root 访问根组件，通过$parent访问父组件

vue在每个实例上够提供了$root 和 $parent 属性。可以通过$root访问当前单页应用的根组件，通过$parent来访问当前组件的父组件，相应的也就可以直接修改根组件或父组件的属性或是调用根组件或父组件上的方法。

父组件可以通过$refs访问子组件

$refs 只能在 mounted 生命周期钩子函数被调用之后才能使用。

$parent 和 $root 在各个生命周期钩子函数中都可以使用。

虽然使用$root 和 $parent 可以方便地修改内容，但这不可避免了造成了子组件和相应根组件或者父组件之间的强耦合，即使用了$parent的子组件必须和相应的父组件成对使用，缺一不可。

在组件化的设计中，像这类的组件不好扩展。

举例如下图：一对组件app 和 content， app是父，content是子，子组件 content 有一个say方法 this.$parent.fish.love

如果新增需求，要求在App2里面也有这么一个儿子组件content，那我们很自然的就会想到直接拿来用了，可这时出现了问题直接调用 say 方法 this.$parent.fish is undefined，因为新的App2没有这个变量。这就尴尬了，这就搞的我们在用一个组件的时候，要把这个组件全部审查一遍，非常耗费时间。

vue里面提供依赖注入的方式来解决这个问题。

2、依赖注入

依赖注入：声明了当前组件依赖的父组件们（直系的祖宗）的外部prop有哪些。

vue里面的provide和inject是对$parent的一种优化封装

provide和inject需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效

依赖注入实现原理：

出处：vue2.0源码，vue2.0/src/core/instance/inject.js

inject也是通过$parent, 依次往父组件上去寻找声明了的provide对象。

和prop类似，那为什么还需要provide / inject呢？
因为在现实的项目中，我的一个组件嵌套着好几层组件，如果运用prop一层层的嵌套传递，就非常的麻烦。而provide / inject就解决了这个问题，只要在顶层父级provide里声明对象或方法，那么下一层级无论多深都能够通过inject来访问到provide的数据。

依赖注入的优点：

祖先组件不需要知道哪些后代组件使用它提供的属性

后代组件不需要知道被注入的属性来自哪里

依赖注入的缺点：

组件间的耦合较为紧密，不易重构,使得组件复用性受到影响。

提供的属性是非响应式。

无法追踪数据的来源，在任意层级都能访问导致数据追踪比较困难，不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了

3、透传及组件二次封装

透传方案 $attr 和 $listener：通过 v-bind=“$attr” 来传递父组件上的prop class 和 style 通过 v-on=“$listenser” 来传递父组件上的事件监听器和事件修饰符

组件二次封装：对一些现有的组件或者三方的组件库做一些定制化的需求

举例：比如对el-input进行二次封装

子组件

<template><div><el-input v-bind="$attrs" v-on="$listeners"></el-input></div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
/deep/ .el-input__inner {border-top: none;border-left: none;border-right: none;
}
</style>

父组件

<template><div><s-input v-model="value" @blur="onBlur"></s-input>{{ value }}</div>
</template>
<script>
import SInput from "@/components/SInput.vue";
export default {name: "attrs",data() {return {value: "aaa"};},components: {SInput},methods: {onBlur() {console.log("blur");}}
};
</script>

vue---组件通信相关推荐

vue组件通信（传值）
vue组件通信有以下几种方式可以实现(个人总结) 一.父组件到子组件传值方式: 一般通过在父组件中给子组件绑定属性的方式进行传值,子组件通过props来接收. 实例: //父组件 <templa ...
【Vue】Vue全家桶（三）Vue组件通信+Vue组件插槽+动画与过渡+使用vue-cli解决Ajax跨域问题
1 Vue组件通信 1.1 组件间通信基本原则不要在子组件中直接修改父组件的状态数据数据在哪, 更新数据的行为(函数)就应该定义在哪 1.2 vue 组件间通信方式 props vue 的自定义事 ...
vue 组件通信的几种方式
前言在vue中, 组件的关系不外乎以下三种: 组件是需要通信的,在开发中,常用到的通信方式有:vuex.eventBus.以及props与emit.$parent与$children,除此之外,还 ...
vue组件通信案例练习（包含：父子组件通信及平行组件通信）
文章目录一.案例概述二.代码准备工作: 案例1.1:父组件向子组件传值(或者叫:子组件使用父组件属性),采用v-bind方式实现案例1.2:子组件向父组件传值(或者叫:子组件调用父组件方法), ...
Vue组件通信的五种方式
Vue组件通信的五种方式文章目录 Vue组件通信的五种方式一. props/$emit(父子通信) 二. vuex(组件之间通信) 三. 事件总线EventBus(组件之间通信) 四. provi ...
vue组件通信的几种方法
vue中我们最常使用的就是父子之间的通信还有全局数据管理vuex了,下面粗略说一下vue组件通信的几种方法组件通信的几种方式 1.父子组件通信 2.兄弟组件通信 3.跨多层级组件通信 4.任意组件( ...
vue组件通信的几种方式
vue组件通信的几种方式最近用vue开发项目,记录一下vue组件间通信几种方式第一种,父子组件通信一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Chil ...
Vue 组件通信之 Bus
关于组件通信我相信小伙伴们肯定也都很熟悉,就不多说了,对组件通信还不熟悉的小伙伴移步这里. 在vue2.0中 $dispatch 和 $broadcast 已经被弃用.官方文档中给出的解释是: 因为基 ...
vue组件通信v兄弟组件通信eventbus遇到的问题（多次触发、第一次不触发）
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置父组件关键代码如下: 1 <tem ...
自制vue组件通信插件:教你如何用mixin写插件
"vue-unicom"的作者:szpoppy,如果觉得对你有用,请一定点个star 这个项目虽然是szpoppy的个人项目,但是在szpoppy公司内是在大面积使用的,一直由sz ...

vue---组件通信