一个案例：Vue2组件化开发组件从入门到入土

1. 环境搭建

1.1. 创建项目

npm install -g @vue/cli


vue create vue_study_todolist

1.2. 清空项目代码

清楚HelloWorld.Vue代码中的内容。

1.3. 启动空项目

1.4 项目目标

项目组件实现以下效果

2. 组件拆分代码

Vue是一个基于组件的框架，允许您将界面拆分成小的、可重用的组件。每个组件都可以包含自己的模板、样式和逻辑，从而提高了代码的可维护性和重用性。

组件通常通过props和events来进行通信。Props允许父组件向子组件传递数据，而子组件则通过events将数据的变化通知给父组件。这种单向数据流的模式使得应用程序的数据流更加可控和预测。

在Vue中，您可以在组件之间传递函数，以实现更高级的交互和数据处理。这可以通过props来实现。您可以将一个函数作为prop传递给子组件，然后子组件可以调用这个函数来触发特定的操作。

例如，假设您有一个父组件和一个子组件，父组件传递了一个函数给子组件作为prop。子组件可以在某个事件发生时调用这个函数，从而通知父组件进行某些处理。

2.1. 组件拆分第一版

2.1.1. App.vue代码

2.1.2. 各个子组件代码

2.1.2.1. MyHeader.vue 代码

2.1.2.2. MyList.vue 代码

2.1.2.3. MyItem.vue 代码

2.1.2.4. MyFooter.vue 代码

2.1.3. 代码层次和流程流转示意图

2.1.3.1. 控件层次示意图

2.1.3.2. 控件初始化数据与事件绑定示意图

2.2. 事件总线版本

事件总线是一种模式，用于在Vue应用程序中实现组件之间的通信，即使这些组件没有直接的父子关系。您可以创建一个Vue实例，作为事件总线，用于触发和监听事件。

通过事件总线，您可以在任何组件中触发和监听事件，实现了组件之间的解耦和通信。请注意，事件总线在大型应用中可能会导致事件管理变得复杂，所以需要慎重使用。

2.2.1. main.js 代码

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'

//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    },
})

2.2.2. App.vue 代码

2.2.3. 各个子组件代码

2.2.3.1. MyHeader.vue 代码

2.2.3.2. MyList代码

2.2.3.3. MyItem.vue 代码

2.2.3.4. MyFooter.vue 代码

2.2.4. 代码流程流转示意图

2.3. 发布订阅模式版本

pubsub-js 是一个JavaScript库，提供了发布-订阅模式的实现，用于在应用程序中实现组件之间的解耦通信。它允许不同的组件在不直接相互关联的情况下进行通信。这个库提供了一个简单的方式来发送消息并订阅事件，从而使应用程序的代码更加模块化和可维护。

导入pubsub-js

2.3.1. main.js 代码

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
})

2.3.2. App.vue 代码

2.3.3. 各个子组件代码

2.3.3.1. MyHeader.vue 代码

2.3.3.2. MyList.vue 代码

2.3.3.3. MyItem.vue 代码

2.3.3.4. MyFooter.vue 代码

2.3.4. 代码流程流转示意图

3. 发布订阅模式和事件总线之间的区别 优劣

发布-订阅模式和事件总线都是用于实现组件之间的通信的模式，但它们在一些方面有所不同。下面是它们之间的区别以及各自的优劣势：

发布-订阅模式：

定义：

发布-订阅模式是一种模式，其中有一个调度中心（通常称为“发布者”），负责管理订阅者（也称为“订阅者”）。订阅者可以订阅感兴趣的事件，而发布者发布这些事件。当事件被发布时，订阅者会收到通知并执行相关操作。

优势：

• 解耦性强：发布者和订阅者之间没有直接关联，从而实现了松耦合。
• 可以有多个订阅者：多个订阅者可以同时订阅同一个事件，实现了多对多的通信。
• 灵活性：允许动态添加和移除订阅者，以及在不影响其他部分的情况下修改事件的处理逻辑。

劣势：

• 调试和追踪：当订阅者数量增加时，跟踪事件的流向和处理变得更加复杂。
• 维护困难：如果不恰当地使用，可能导致事件的处理分散和难以维护。

事件总线：

定义：

事件总线是一个中央的通信渠道，用于在不同组件之间传递消息。在Vue中，通常是通过创建一个Vue实例作为事件总线，允许组件通过该实例来发布和订阅事件。

优势：

• 简单易用：Vue的事件总线机制非常简单，适用于小规模的组件通信。
• Vue内置：作为Vue框架的一部分，事件总线是原生支持的，无需额外的库。
• 组件间通信：可以方便地在任何两个组件之间进行通信，而不考虑它们的层级关系。

劣势：

• 限制：事件总线适用于小型应用，但对于大型应用，可能会导致事件处理逻辑分散且难以追踪。
• 耦合性：事件总线可能导致组件之间的耦合性增加，因为事件可以被任何组件订阅，难以管理。

结论：

发布-订阅模式和事件总线都有各自的优劣势，最适合的解决方案取决于您的应用程序的规模和需求。对于小型应用，事件总线可能更加简便，但对于大型应用，您可能需要考虑更结构化的通信方案，如Vuex状态管理、单向数据流等，以避免通信变得混乱和难以维护。在使用这些模式时，始终要考虑代码的清晰性、可维护性和可扩展性。