组件是vue的强大功能之一,组件实例的作用域是相互独立的,意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的通信是非常重要的。
一、props / $emit
1、父组件向子组件传值(props的用法)
2、子组件向父组件传递数据($emit的用法)
二、ref / $refs
三、eventBus事件总线($emit / $on)
1、创建事件中心管理组件之间的通信
2、发送事件 假设有两个兄弟组件firstCom和secondCom
3、接收事件
四、vuex数据共享
五、依赖注入(provide / inject)
六、$parent / $children
七、$attrs / $listeners
八、总结
一、props / $emit
父组件通过 props
向子组件传递数据,子组件通过 $emit
和父组件通信
1、父组件向子组件传值(props的用法)
props的特点:
- 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的用法)
$emit的特点:
$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>
二、ref / $refs
实现父子组件之间的通信
ref:这个属性用在子组件上,它的用用就指向了子组件的实例,可以通过实例来访问组件的数据和方法。
用法:
父组件:
<template>
<child ref="child"></component-a>
</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>
子组件:
export default {
data () {
return {
name: 'JavaScript'
}
},
methods: {
sayHello () {
console.log('hello')
}
}
}
三、eventBus事件总线($ emit / $on)
适用于父子组件、非父子组件等之间的通信,使用步骤如下:
1、创建事件中心管理组件之间的通信
// event-bus.js
import Vue from 'vue'
export const EventBus = 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 {
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
值存贮在了事件总线中,在其他组件中可以直接访问。事件总线就相当于一个桥梁,不用组件通过它来通信。虽然看起来比较简单,但是这种方法也有不变之处,如果项目过大,使用这种方式进行通信,后期维护起来会很困难。
四、vuex数据共享
通过Vuex存储数据, Vuex是一个专为vue.js 应用程序开发的状态管理模式, 它采用集中式存储管理数据,以相应的规则保证状态以一种可预测的方式发生改变, 一变全变,同步更新数据。
// 注册代码
const store = new Vue.Store({
state:{
count: 100
},
mutations: {
addCount(state, val = 1) {
state.count += val;
},
subCount(state, val = 1) {
state.count -= val;
}
}
})
// 组件调用
this.$store.commit('addCount'); // 加 1
this.$store.commit('subCount'); // 减 1
五、依赖注入(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)
注意: 依赖注入所提供的属性是非响应式的。
六、$parent / $children
- 使用
$parent
可以让组件访问父组件的实例(访问的是上一级父组件的属性和方法)。 - 使用
$children
可以让组件访问子组件的实例,但是,$children
并不能保证顺序,并且访问的数据也不是响应式的。
用法:
父组件:
<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>
子组件:
<template>
<div>
<span>{
{
message}}</span>
<p>获取父组件的值为: {
{
parentVal}}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Vue'
}
},
computed:{
parentVal(){
return this.$parent.msg;
}
}
}
</script>
在上面的代码中,子组件获取到了父组件的parentVal
值,父组件改变了子组件中message
的值。
注意:
- 通过
$parent
访问到的是上一级父组件的实例,可以使用$root
来访问根组件的实例 - 在组件中使用
$children
拿到的是所有的子组件的实例,它是一个数组,并且是无序的 - 在根组件 #app 上拿
$parent
得到的是 new Vue()的实例,在这实例上再拿$parent
得到的是undefined
,而在最底层的子组件拿$children
是个空数组 $children
的值是数组,而$parent
是个对象
七、$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声明的)
八、总结
可以将不同组件间的通信分为3种类型:父子组件间通信、兄弟组件间通信、任意组件间通信
1、父子组件间通信
- 子组件通过
props
属性来接受父组件的数据,然后父组件在子组件上注册监听事件,子组件通过emit
触发事件来向父组件发送数据。 - 通过
ref
属性给子组件设置一个名字。父组件通过$refs
组件名来获得子组件,子组件通过$parent
获得父组件,这样也可以实现通信。 - 使用
provide/inject
,在父组件中通过provide
提供变量,在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深,只要调用了inject
那么就可以注入provide
中的数据。
2、兄弟组件间通信
- 使用
eventBus
的方法,它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象,通信的组件引入这个实例,通信的组件通过在这个实例上监听和触发事件,来实现消息的传递。 - 通过
$parent / $refs
来获取到兄弟组件,也可以进行通信。
3、任意组件间通信
- 使用
eventBus
,其实就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。
如果业务逻辑复杂,很多组件之间需要同时处理一些公共的数据,这个时候采用上面这一些方法可能不利于项目的维护。这个时候可以使用 vuex ,vuex 的思想就是将这一些公共的数据抽离出来,将它作为一个全局的变量来管理,然后其他组件就可以对这个公共数据进行读写操作,这样达到了解耦的目的。
更多推荐:Vue组件传参三种方式