Vue.js 中的全局事件总线——Vue $bus

小蓝 • 2024-12-12 12:54 • 编程

Vue.js 提供了一种全局事件总线的机制——Vue $bus。 $bus 实例中可以订阅、发布、取消订阅触发的事件，在不同组件之间传递数据。这种机制简化了组件之间相互影响的复杂性，使得不同组件之间的通讯变得更加便捷。

Vue.js 是一个建立在 Vue.js 上的 UI 库。Vue.js 支持webpack 配置和vue-cli脚手架构建项目，如下面示例所示：

  npm install -g vue-cli
  vue init webpack myproject
  cd myproject
  npm install
  npm run dev

在命令行界面中操作完成后，执行 npm run dev 启动 webpack 服务器。访问本地的 http://localhost:8080 即可看到页面。

当 Vue 部署到非跨域环境时，可以使用以下代码在 Vue 实例中添加一个 $bus 属性。

  const bus = new Vue()
    
  Object.defineProperty(Vue.prototype, '$bus', {
      get() {
          return bus
      }
  })

然后在不同的组件中，可以使用以下代码订阅事件：

  this.$bus.$on('eventName', (data)=>{
      // 处理数据
  })

还可以使用以下代码取消订阅事件：

  this.$bus.$off('eventName')

最后，在需要订阅事件的组件中，使用以下代码触发事件即可：

  this.$bus.$emit('eventName', data)

使用 Vue 部署在 IPFS 中，需要在 Vue 项目的 dist 目录下，打包出一个网页发布到IPFS，如下面的示例所示：

  npm run build

然后会生成一个 dist 目录，此时将 dist 目录添加到 IPFS 中即可：

  ipfs add -w ./dist

添加完成后，会生成一个 hash ，访问以下链接便可查看 Vue 应用程序：

  https://ipfs.io/ipfs/your-hash/index.html

将 Vue 部署到 Linux 系统中，需要在服务器中安装 Node.js、npm 和 pm2。安装完成后，在服务器中执行以下命令即可：

  npm run build
  pm2 start npm --name "app-name" -- start

此时 Vue 就部署在服务器中了，可以通过服务器的 IP 访问部署好的 Vue 应用程序。

在 Vue 项目中执行以下命令，将应用程序打包成一个可执行的文件：

  npm run build
  npx http-server dist/

执行完毕后，Vue 应用程序会部署在服务器上。

将 Vue 部署到 Nginx 中，需要在 Nginx 配置文件中添加以下代码：

  location / {
    root /path/to/vuedir/dist; 
    index index.html; 
    try_files $uri $uri/ /index.html;
  }

执行完毕后，Vue 应用程序会部署在 Nginx 中。

总之，Vue.js 中的全局事件总线——Vue $bus 十分方便，可以为组件之间的通讯提供稳定、标准化的途径。此外，它还可以与不同的部署环境相适应，应用在不同场景和系统中，为 Vue 开发带来了很大的方便。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/243123.html