VueJS中组件间的通信

组件是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:访问父子组件实例
    在这里插入图片描述

打印结果

在这里插入图片描述

Vuex

发布了4 篇原创文章 · 获赞 0 · 访问量 70

猜你喜欢

转载自blog.csdn.net/k19970320j/article/details/104389995