1. 父组件通过 props 向子组件传递数据,子组件通过 $emit 和父组件通信
2. ref:这个属性用在子组件上,指向子组件的实例,可以通过实例来访问组件的数据和方法
3. $emit 绑定一个自定义事件,当这个事件被执行的时候就会将参数传递给父组件,而父组件通过v-on监听并接收参数
4. 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>求和: {{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>
如果项目过大,使用这种方式进行通信,后期维护起来会很困难
5.依赖注入(provide / inject)
这种方式就是vue中依赖注入,该方法用于 父子组件之间 的通信。当然这里所说的父子不一定是真正的父子,也可以是祖孙组件,在层数很深的情况下,可以使用这种方式来进行传值。就不用一层一层的传递数据了。
provide和inject是vue提供的两个钩子,和data、methods是同级的。并且provide的书写形式和data一样。
provide 钩子用来发送数据或方法。
inject钩子用来接收数据或方法
用法:
父组件中:
provide() {
return {
num: this.num
};
}
子组件中:
inject: ['num']