组件是VueJS
中最强大的功能之一,通过组件的组合,应用程序就像是推积木一样组合而成。各个组件之间是相互独立的,这意味着不同组件之间的数据不能共享,因此组件之间的通信就显得格外重要了,本文将详细介绍VueJS中组件之间的通信
组件关系图
从图中我们可以清楚的了解组件之间的关系。我们需要针对不同组件之间选择不同的通信方式
props/$emit`
props
是一种父组件通过属性向子组件的通信方式,父组件通过prop
传递,子组件通过props
声明使用
- 子组件向父组件传值,可以通过自定义事件
$emit
的方式传递,子组件分发事件,父组件监听事件
$emit/$on(事件总线)
通过事件总线的方式我们可以实现有关系或者没有关系的组件之间的通信,如果遇到比较复杂的项目,建议使用Vuex来解决
我们可以new Vue()
一个空的Vue
实例用作整个项目的总线,实现事件的分发和监听
const bus = new Vue()
Vue.prototype.$bus = bus
在整个项目组件中,可以使用this.$bus.$emit()
分发事件,使用this.$bus.$on()
来监听事件
$attrs/$listeners
$attrs
:包含了父作用域中不被prop
所识别的特性绑定(style/class除外)。当一个组件没有任何prop
时,这里会包含所有父作用域的绑定,并且可以通过v-bind="$attrs"
传入内部组件$listeners
:包含了父作用域中的v-on
事件监听器,它可以通过v-on="$listeners"
传入组件内部
打印的结果
provide/inject
一个祖先组件,使用provide
向后代组件注入一个依赖,在后代组件中使用inject
接收祖先组件提供的变量。
$parent/$children/$ref
- $ref:如果在普通的DOM元素上使用,引用指向的就是DOM元素,如果用在子组件上,引用就是指向组件实例
$parent
/$children
:访问父子组件实例