Props 和 Events
使用props和事件。父组件通过props向子组件传递数据,子组件通过事件向父组件发送数据。这种通信方式是单向的。
ref
使用ref。在子组件中使用ref来获取或设置父组件传递的DOM元素,从而实现组件间的通信
eventbus
创建一个事件中心,通过它来传递事件和接收事件。这种方式适用于需要跨组件通信的情况
Minxins混入
可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响
vue中mixins的使用方法和注意点
Vuex
使用vuex。当业务逻辑复杂,需要处理公共数据时,可以使用vuex作为全局状态管理器,实现组件间的通信。
provide和inject
在父组件中通过provide提供变量,在子组件中通过inject注入这些变量,实现祖先组件向子孙后代注入依赖。
parent 和 $children
Vue 中的每个组件都具有 children 属性。
children 属性指向组件的子组件。通过
children 属性,组件可以直接访问父组件和子组件的数据和方法。
$attrs
在子组件中,可以使用listeners获取父组件注册的事件监听器。
场景选择
- 兄弟组件,公共事件可以用eventBus
- 父子组件可以用props(父传子)、this.$emit(子传父)、
- 父子或祖孙组件可以用inject
- 组件多层级,业务逻辑复杂,可以用vuex;
相关文章:
Vue 组件间通信的六种方式
vue的通信方法有哪些