Vue2中跨组件共享公共属性的方法、优缺点与实现

一、vuex（最常用）

优缺点

• 优点：集中管理状态，组件间解耦，易于调试和测试。
• 缺点：学习成本较高，对于小项目可能过于复杂。

适用场景

• 大型、复杂的单页面应用（SPA）。
• 需要全局管理状态的应用。

// store.js  
import Vue from 'vue'  
import Vuex from 'vuex'  Vue.use(Vuex)  export default new Vuex.Store({  state: {  message: 'Hello from Vuex!'  },  mutations: {  setMessage(state, msg) {  state.message = msg  }  }  
})  // 在组件中使用  
<template>  <div>{{ message }}</div>  
</template>  <script>  
import { mapState } from 'vuex'  export default {  computed: {  ...mapState(['message'])  }  
}  
</script>

 二、事件总线（Event Bus）

优缺点

• 优点：简单易用，适用于简单的组件间通信。
• 缺点：当项目较大时，事件管理可能会变得混乱。

适用场景

• 中小型项目。
• 简单的组件间通信。

// event-bus.js  
import Vue from 'vue' 
// 创建一个新的Vue实例作为事件总线 
export const EventBus = new Vue()  // 在组件中触发事件  
EventBus.$emit('customEvent', { message: 'Hello from EventBus!' })  // 在另一个组件中监听事件  
EventBus.$on('customEvent', (payload) => {  console.log(payload.message)  
})  // 组件销毁时移除监听  
beforeDestroy() {  EventBus.$off('customEvent')  
}

三、provide / inject

优缺点

• 优点：适用于跨层级传递数据，无需每层都显式传递。
• 缺点：可能导致组件间耦合度过高，数据流动难以追踪。

适用场景

• 组件树中的深层嵌套关系。
• 跨层级传递少量数据的场景。

在祖先组件中使用provide选项来提供数据，然后在后代组件中使用inject选项来注入数据。

// 祖先组件  
export default {  provide() {  return {  message: 'Hello from provide/inject!'  }  }  
}  // 后代组件  
export default {  inject: ['message'],  mounted() {  console.log(this.message)  }  
}

四、mixins

优缺点

• 优点：代码复用度高，可以在多个组件之间共享。
• 缺点：可能导致命名冲突，且mixin中的生命周期钩子会在组件的生命周期钩子之前调用，可能导致意外的副作用。

适用场景

• 当多个组件需要共享相似的逻辑或数据时。
• 需要在多个组件中复用某些方法和数据时

创建一个包含共享属性和方法的mixin对象，然后在需要共享的组件中引入并使用。

// mixins.js  
export default {  data() {  return {  message: 'Hello from mixins!',message2: '123123'}  },  methods: {  showMessage() {  console.log(this.message)  }  }  
}  // 组件中使用mixins  
import myMixin from './mixins'  export default {  mixins: [myMixin],  mounted() {  this.showMessage()  console.log(this.message2) // 123123}  
}