Vue的七种常用好理解组件通信方式

七种组件通信方式：
props / $emit
refs
localStorage / sessionStorage
vuex(状态管理工具)
eventBus
provide/inject
$children / $parent

1、props和$emit是Vue中最常见的组件通信方式
父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。
总结:Vue是单向数据流,为了保证数据的单向流动。 prop 只可以从上一级组件传递到下一级组件（父子组件）而且 prop 只读，不可被修改，所有修改都会失效并警告。

2、refs方式
在使用选项式API时，我们可以通过this.$refs.name的方式获取指定元素或者组件，但是组合式API中就无法使用哪种方式获取。如果我们想要通过ref的方式获取组件或者元素，需要定义一个同名的Ref对象，在组件挂载后就可以访问了。

3、localStorage / sessionStorage
这种通信比较简单,缺点是数据和状态比较混乱,不太容易维护。

4、vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。
state：用于数据的存储，是store中的唯一数据源
getters：如vue中的计算属性一样，基于state数据的二次包装，常用于数据的筛选和多个数据的相关性计算
mutations：类似函数，改变state数据的唯一途径，且不能用于处理异步事件
actions：类似于mutation，用于提交mutation来改变状态，而不直接变更状态，可以包含任意异步操作
modules：类似于命名空间，用于项目中将各个模块的状态分开定义和操作，便于维护

5、eventBus
eventBus 又称为事件总线，在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以通知其他组件。
eventBus也有不方便之处, 当项目较大,就容易造成难以维护的灾难，用完了记得及时值为移除

6、provide和inject是Vue中提供的一对API，该API可以实现父组件向子组件传递数据，无论层级有多深，都可以通过这对API实现。
父组件

<template>
  <div>
	<children></children>
  </div>
</template>

<script>
  import children from '../components/test/children.vue'
  export default {
      
      
    name: "A",
    provide: {
      
      
      for: "demo"
    },
    components:{
      
      
      children 
    }
  }
</script>

子组件 children

<template>
  <div>
    {
   
   {demo}}
    <children2></children2>
  </div>
</template>

<script>
  import children2 from '../components/test/children2.vue'
  export default {
      
      
    name: "children",
    inject: ['for'],
    data() {
      
      
      return {
      
      
        demo: this.for
      }
    },
    components: {
      
      
      children2
    }
  }
</script>

子组件的子组件 children2

<template>
  <div>
    {
   
   {demo}}
  </div>
</template>

<script>
  export default {
      
      
    name: "children2",
    inject: ['for'],
    data() {
      
      
      return {
      
      
        demo: this.for
      }
    }
  }
</script>

7、$children / $parent
通过$parent和$children就可以访问组件的实例，拿到实例可以访问此组件的所有方法和data。

按使用场景可以分为三类:
父子组件通信: props;$parent / $children; provide / inject ; ref ;
兄弟组件通信: eventBus ; vuex
跨级通信: eventBus；Vuex；provide / inject

Vue的七种常用好理解组件通信方式

猜你喜欢