Vue组件如何“传话”？这里有个小秘诀！

🌈个人主页：前端青山
🔥系列专栏：vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来vue篇专栏内容:vue-组件通信

Vue组件通信

（1） props / $emit

1. 父组件向子组件传值

2. 子组件向父组件传值

（2）eventBus事件总线（$emit / $on）

（3）依赖注入（provide / inject）

（3）ref / $refs

（4）$parent / $children

（5）$attrs / $listeners

（6）总结

Vue组件通信

组件通信的方式如下：

（1） props / $emit

父组件通过props向子组件传递数据，子组件通过$emit和父组件通信

1. 父组件向子组件传值

props只能是父组件向子组件进行传值，props使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件不断更新。
props 可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以传递一个函数。
props属性名规则：若在props中使用驼峰形式，模板中需要使用短横线的形式

// 父组件
<template><div id="father"><son :msg="msgData" :fn="myFunction"></son></div>
</template><script>
import son from "./son.vue";
export default {name: father,data() {msgData: "父组件数据";},methods: {myFunction() {console.log("vue");}},components: {son}
};
</script>
复制代码
// 子组件
<template><div id="son"><p>{{msg}}</p><button @click="fn">按钮</button></div>
</template>
<script>
export default {name: "son",props: ["msg", "fn"]
};
</script>
复制代码

2. 子组件向父组件传值

$emit绑定一个自定义事件，当这个事件被执行的时就会将参数传递给父组件，而父组件通过v-on监听并接收参数。

// 父组件
<template><div class="section"><com-article :articles="articleList" @onEmitIndex="onEmitIndex"></com-article><p>{{currentIndex}}</p></div>
</template><script>
import comArticle from './test/article.vue'
export default {name: 'comArticle',components: { comArticle },data() {return {currentIndex: -1,articleList: ['红楼梦', '西游记', '三国演义']}},methods: {onEmitIndex(idx) {this.currentIndex = idx}}
}
</script>
复制代码
//子组件
<template><div><div v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{{item}}</div></div>
</template><script>
export default {props: ['articles'],methods: {emitIndex(index) {this.$emit('onEmitIndex', index) // 触发父组件的方法，并传递参数index}}
}
</script>
复制代码

（2）eventBus事件总线（`$emit / $on`）

eventBus事件总线适用于父子组件、非父子组件等之间的通信，使用步骤如下： （1）创建事件中心管理组件之间的通信

// event-bus.jsimport Vue from 'vue'
export const EventBus = new Vue()
复制代码

（2）发送事件 假设有两个兄弟组件firstCom和secondCom：

<template><div><first-com></first-com><second-com></second-com></div>
</template><script>
import firstCom from './firstCom.vue'
import secondCom from './secondCom.vue'
export default {components: { firstCom, secondCom }
}
</script>
复制代码

在firstCom组件中发送事件：

<template><div><button @click="add">加法</button>    </div>
</template><script>
import {EventBus} from './event-bus.js' // 引入事件中心export default {data(){return{num:0}},methods:{add(){EventBus.$emit('addition', {num:this.num++})}}
}
</script>
复制代码

（3）接收事件 在secondCom组件中发送事件：

<template><div>求和: {{count}}</div>
</template><script>
import { EventBus } from './event-bus.js'
export default {data() {return {count: 0}},mounted() {EventBus.$on('addition', param => {this.count = this.count + param.num;})}
}
</script>
复制代码

在上述代码中，这就相当于将num值存贮在了事件总线中，在其他组件中可以直接访问。事件总线就相当于一个桥梁，不用组件通过它来通信。

虽然看起来比较简单，但是这种方法也有不变之处，如果项目过大，使用这种方式进行通信，后期维护起来会很困难。

（3）依赖注入（provide / inject）

这种方式就是Vue中的依赖注入，该方法用于父子组件之间的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方法来进行传值。就不用一层一层的传递了。

provide / inject是Vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样。

provide 钩子用来发送数据或方法
inject钩子用来接收数据或方法

在父组件中：

provide() { return {     num: this.num  };
}
复制代码

在子组件中：

inject: ['num']
复制代码

还可以这样写，这样写就可以访问父组件中的所有属性：

provide() {return {app: this};
}
data() {return {num: 1};
}inject: ['app']
console.log(this.app.num)
复制代码

注意： 依赖注入所提供的属性是非响应式的。

（3）ref / $refs

这种方式也是实现父子组件之间的通信。

ref：这个属性用在子组件上，它的引用就指向了子组件的实例。可以通过实例来访问组件的数据和方法。

在子组件中：

export default {data () {return {name: 'JavaScript'}},methods: {sayHello () {console.log('hello')}}
}
复制代码

在父组件中：

<template><child ref="child"></component-a>
</template>
<script>import child from './child.vue'export default {components: { child },mounted () {console.log(this.$refs.child.name);  // JavaScriptthis.$refs.child.sayHello();  // hello}}
</script>
复制代码

（4）`$parent / $children`

使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）
使用$children可以让组件访问子组件的实例，但是，$children并不能保证顺序，并且访问的数据也不是响应式的。

在子组件中：

<template><div><span>{{message}}</span><p>获取父组件的值为:  {{parentVal}}</p></div>
</template><script>
export default {data() {return {message: 'Vue'}},computed:{parentVal(){return this.$parent.msg;}}
}
</script>
复制代码

在父组件中：

// 父组件中
<template><div class="hello_world"><div>{{msg}}</div><child></child><button @click="change">点击改变子组件值</button></div>
</template><script>
import child from './child.vue'
export default {components: { child },data() {return {msg: 'Welcome'}},methods: {change() {// 获取到子组件this.$children[0].message = 'JavaScript'}}
}
</script>
复制代码

在上面的代码中，子组件获取到了父组件的parentVal值，父组件改变了子组件中message的值。 需要注意：

通过$parent访问到的是上一级父组件的实例，可以使用$root来访问根组件的实例
在组件中使用$children拿到的是所有的子组件的实例，它是一个数组，并且是无序的
在根组件#app上拿$parent得到的是new Vue()的实例，在这实例上再拿$parent得到的是undefined，而在最底层的子组件拿$children是个空数组
$children 的值是数组，而$parent是个对象

（5）`$attrs / $listeners`

考虑一种场景，如果A是B组件的父组件，B是C组件的父组件。如果想要组件A给组件C传递数据，这种隔代的数据，该使用哪种方式呢？

如果是用props/$emit来一级一级的传递，确实可以完成，但是比较复杂；如果使用事件总线，在多人开发或者项目较大的时候，维护起来很麻烦；如果使用Vuex，的确也可以，但是如果仅仅是传递数据，那可能就有点浪费了。

针对上述情况，Vue引入了$attrs / $listeners，实现组件之间的跨代通信。

先来看一下inheritAttrs，它的默认值true，继承所有的父组件属性除props之外的所有属性；inheritAttrs：false 只继承class属性。

$attrs：继承所有的父组件属性（除了prop传递的属性、class 和 style ），一般用在子组件的子元素上
$listeners：该属性是一个对象，里面包含了作用在这个组件上的所有监听器，可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）

A组件（APP.vue）：

<template><div id="app">//此处监听了两个事件，可以在B组件或者C组件中直接触发 <child1 :p-child1="child1" :p-child2="child2" @test1="onTest1" @test2="onTest2"></child1></div>
</template>
<script>
import Child1 from './Child1.vue';
export default {components: { Child1 },methods: {onTest1() {console.log('test1 running');},onTest2() {console.log('test2 running');}}
};
</script>
复制代码

B组件（Child1.vue）：

<template><div class="child-1"><p>props: {{pChild1}}</p><p>$attrs: {{$attrs}}</p><child2 v-bind="$attrs" v-on="$listeners"></child2></div>
</template>
<script>
import Child2 from './Child2.vue';
export default {props: ['pChild1'],components: { Child2 },inheritAttrs: false,mounted() {this.$emit('test1'); // 触发APP.vue中的test1方法}
};
</script>
复制代码

C 组件 (Child2.vue)：

<template><div class="child-2"><p>props: {{pChild2}}</p><p>$attrs: {{$attrs}}</p></div>
</template>
<script>
export default {props: ['pChild2'],inheritAttrs: false,mounted() {this.$emit('test2');// 触发APP.vue中的test2方法}
};
</script>
复制代码

在上述代码中：

C组件中能直接触发test的原因在于 B组件调用C组件时使用 v-on 绑定了$listeners 属性
在B组件中通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的）

（6）总结

（1）父子组件间通信

子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。
通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件，子组件通过 $parent 获得父组件，这样也可以实现通信。
使用 provide/inject，在父组件中通过 provide提供变量，在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深，只要调用了 inject 那么就可以注入 provide中的数据。

（2）兄弟组件间通信