Vue.js的组件化开发与通信

简介

Vue.js是一款流行的前端JavaScript框架，具有组件化的特点。组件化开发是一种构建现代化Web应用的重要方式，它将一个页面划分为多个组件，每个组件独立处理自己的逻辑和UI。Vue.js的组件化开发模式让开发人员可以更加高效和方便地进行开发和维护。

组件化开发特点

Vue.js的组件化开发有以下几个特点：

• 代码复用：Vue.js的组件可以被多次使用，提高了代码的复用率。将页面划分为多个组件，可以让不同的组件处理不同的逻辑，使得代码更具可读性，易于维护和升级。
• 组件化的思想：Vue.js采用的是组件化的思想。将一个大的应用拆分成多个小的组件，让不同的组件互相不干扰，可以更加方便的进行开发和升级。同时，这样的设计也可以提高代码的重用性、可维护性和可扩展性。
• 数据传递：Vue.js采用的是单向数据流的方式，将数据从父组件传递给子组件或者将子组件的数据传递给父组件。这种数据流的方式，让组件之间的状态更加清晰和可控，避免了数据混乱和错误的发生。
• 视图控制：Vue.js中的组件可以包含自己的内部状态和逻辑，以封装视图上的交互和处理行为。这样的设计可以让开发人员专注于组件的设计和UI的实现，而不用关注系统的其他部分。

组件通信方式

父子组件之间的通信

可以通过父组件向子组件传递 props 数据来实现，子组件通过 props 接收数据即可。此外，子组件向父组件传递数据的方式有：使用自定义事件和 emit/on 方法、使用回调函数等方法

// 父组件
<template>
  <div>
    <child :msg="parentMsg"/>
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  name: 'Parent',
  components: { Child },
  data () {
    return {
      parentMsg: 'Hello'
    }
  }
}
</script>
// 子组件
<template>
  <div>{{msg}}, Child Component</div>
</template>
<script>
export default {
  name: 'Child',
  props: {
    msg: String
  }
}
</script>

接收数据：在子组件中通过 props 接收父组件的数据

// 子组件
<template>
  <div>{{msg}}, Child Component</div>
</template>
<script>
export default {
  name: 'Child',
  props: {
    msg: String
  }
}
</script>

兄弟组件之间的通信

可以使用父组件作为中转站，通过向父组件传递数据，由父组件再向另一个需要通信的子组件传递数据。除此之外，还可以使用 EventBus、Vuex 等 Vue.js 提供的全局状态管理工具实现组件之间的通信

EventBus通信

// EventBus.js
import Vue from 'vue'
export default new Vue()
// ComponentA.vue
<template>
  <div>
    <h2>Component A</h2>
    <button @click="onClick">Send Data</button>
  </div>
</template>
<script>
import EventBus from '@/utils/EventBus'
export default {
  name: 'ComponentA',
  methods: {
    onClick () {
      EventBus.$emit('event-name', 'Component A sends data')
    }
  }
}
</script>
// ComponentB.vue
<template>
  <div>
    <h2>Component B</h2>
    <div>{{msg}}</div>
  </div>
</template>
<script>
import EventBus from '@/utils/EventBus'
export default {
  name: 'ComponentB',
  data () {
    return {
      msg: ''
    }
  },
  mounted () {
    EventBus.$on('event-name', data => {
      this.msg = data
    })
  }
}
</script>

跨级组件之间的通信

可以使用 provide/inject API，它们可以向下传递数据，被注入的组件可以通过 inject 属性来接收数据。在注入属性中指定一个键名后，可以在被注入的组件中使用相同键名来访问这个属性

// 祖先组件
<template>
  <div>
    <parent-component />
  </div>
</template>
<script>
import ParentComponent from './ParentComponent.vue'
export default {
  name: 'AncestorComponent',
  components: { ParentComponent },
  provide () {
    return {
      ancestorMsg: 'I am ancestor component!'
    }
  }
}
</script>
// 父级组件
<template>
  <div>
    <child-component />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  name: 'ParentComponent',
  components: { ChildComponent }
}
</script>
// 子组件
<template>
  <div>
    {{injectMsg}}, ChildComponent
  </div>
</template>
<script>
export default {
  name: 'ChildComponent',
  inject: ['ancestorMsg'],
  data () {
    return {
      injectMsg: this.ancestorMsg
    }
  }
}
</script>