前言
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的。
1 props / $emit 2 ref / $refs 3 bus事件总线($emit / $on) 4 依赖注入(provide / inject) 5 $parent / $children 6 $attrs / $listeners
除了使用vuex外还有下面6种组件间的通信方式:
1、 props / $emit
父组件通过 props 向子组件传递数据,子组件通过 $emit 和父组件通信
(1)父组件向子组件传值(props的用法)
props的特点:
props只能是父组件向子组件进行传值,props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父组件的更新而响应式更新。
props可以显示定义一个或一个以上的数据,对于接收的数据,可以是各种数据类型,同样也可以是传递一个函数。
props属性名规则:若在props中使用驼峰形式,模板中标签需要使用短横线的形式来书写。
用法:
父组件:
1 // 父组件 2 <template> 3 <div id="father"> 4 <son :msg="msgData" :fn="myFunction"></son> 5 </div> 6 </template> 7 8 <script> 9 import son from './son.vue' 10 export default { 11 name: father, 12 data() { 13 msgData: '父组件数据' 14 }, 15 methods: { 16 myFunction() { 17 console.log('vue') 18 } 19 }, 20 components: { 21 son 22 } 23 } 24 </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的用法)
$emit的特点:
$emit 绑定一个自定义事件,当这个事件被执行的时候就会将参数传递给父组件,而父组件通过v-on监听并接收参数
用法:
父组件:
1 // 父组件 2 <template> 3 <div class="section"> 4 <com-article 5 :articles="articleList" 6 @onEmitIndex="onEmitIndex" 7 ></com-article> 8 <p>{{ currentIndex }}</p> 9 </div> 10 </template> 11 12 <script> 13 import comArticle from './test/article.vue' 14 export default { 15 name: 'comArticle', 16 components: { comArticle }, 17 data() { 18 return { 19 currentIndex: -1, 20 articleList: ['红楼梦', '西游记', '三国演义'] 21 } 22 }, 23 methods: { 24 onEmitIndex(idx) { 25 this.currentIndex = idx 26 } 27 } 28 } 29 </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、ref / $refs
这种方式也是实现父子组件之间的通信
ref:这个属性用在子组件上,它的用用就指向了子组件的实例,可以通过实例来访问组件的数据和方法
用法:
在子组件中:
export default { data() { return { name: 'JavaScript' } }, methods: { sayHello() { console.log('hello') } } }
在父组件中:
<template> <child ref="child"></child> </template> <script> import child from './child.vue' export default { components: { child }, mounted() { console.log(this.$refs.child.name) // JavaScript this.$refs.child.sayHello() // hello } } </script>
3、bus事件总线($emit / $on)
bus事件总线适用于父子组件、非父子组件等之间的通信,使用步骤如下:
(1)创建事件中心管理组件之间的通信
// bus.js import Vue from 'vue' export const bus = new Vue()
(2)发送事件 假设有两个兄弟组件firstCom和secondCom:
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 { bus } from './event-bus.js' // 引入事件中心 export default { data() { return { num: 0 } }, methods: { add() { bus.$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值存贮在了事件总线中,在其他组件中可以直接访问。事件总线就相当于一个桥梁,不用组件通过它来通信。虽然看起来比较简单,但是这种方法也有不变之处,如果项目过大,使用这种方式进行通信,后期维护起来会很困难。
4、依赖注入(provide / inject)
这种方式就是vue中依赖注入,该方法用于 父子组件之间 的通信。当然这里所说的父子不一定是真正的父子,也可以是祖孙组件,在层数很深的情况下,可以使用这种方式来进行传值。就不用一层一层的传递数据了。
provide和inject是vue提供的两个钩子,和data、methods是同级的。并且provide的书写形式和data一样。
provide 钩子用来发送数据或方法。
inject钩子用来接收数据或方法
用法:
父组件中:
provide() { return { num: this.num } },
子组件中:
inject: ['num']
还有另一种写法,这种写法可以访问父组件中的所有属性:
provide() { return { app: this } },
注意: 依赖注入所提供的属性是非响应式的。
5、$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是个对象
6、$attrs / $listeners
考虑一种场景,如果A是B组件的父组件,B是C组件的父组件。如果想要组件A给C组件传递数据,这种隔代传数据的情况该使用哪种方式呢?
如果是用props/ $emit 来一级一级的传递,确实可以完成,但是比较复杂;如果使用事件总线,在多人开发或者项目较大的时候,维护起来很麻烦;如果使用vuex,如果仅仅是传递数据,那可能有点浪费了。
针对上述情况,vue引入了 $attrs / $listeners,实组件之间的跨代通信。
$attrs:继承所有的父组件属性(除了props传递的属性、class 和 style),一般用在子组件的子元素上
$listeners:该属性是一个对象,里面包含了作用在这个组件上的所有监听器,可以配合 v-on=" $listeners " 将所有的事件监听器指向这个组件的某个特定的子元素。(相当于子组件继承父组件的事件)
再说一下 inheritAttrs
默认值为true,继承所有的父组件属性除props之外的所有属性。
只继承class属性。
$attrs / $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种组件间的通信方法,可以将不同组件间的通信分为3种类型:父子组件间通信、兄弟组件间通信、任意组件间通信
1、父子组件间通信
子组件通过 props 属性来接受父组件的数据,然后父组件在子组件上注册监听事件,子组件通过 emit 触发事件来向父组件发送数据。
通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件,子组件通过 $parent 获得父组件,这样也可以实现通信。
使用 provide/inject,在父组件中通过 provide提供变量,在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深,只要调用了 inject 那么就可以注入 provide中的数据。
2、兄弟组件间通信
使用 eventBus 的方法,它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象,通信的组件引入这个实例,通信的组件通过在这个实例上监听和触发事件,来实现消息的传递。
通过 $parent / $refs 来获取到兄弟组件,也可以进行通信。
3、任意组件间通信
使用 eventBus ,其实就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。
如果业务逻辑复杂,很多组件之间需要同时处理一些公共的数据,这个时候采用上面这一些方法可能不利于项目的维护。这个时候可以使用 vuex ,vuex 的思想就是将这一些公共的数据抽离出来,将它作为一个全局的变量来管理,然后其他组件就可以对这个公共数据进行读写操作,这样达到了解耦的目的。