一个详细例子说明vue components 组件间调用方法，传值问题的示例

最新推荐文章于 2025-03-02 15:55:06 发布

请告诉他

最新推荐文章于 2025-03-02 15:55:06 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/fly19920602/article/details/126708529

vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用globalBus.js创建一个全局事件总线，以便在不同组件间传递搜索关键字，实现在搜索框输入时在cmsMain组件中检索数据。通过引入并使用globalBus，简化了组件间的通信过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先

看下我们的具体情况

以上是本次演示的关键文件

其中有

cmsMain

cmsNavBar

在cmsNavBar这个vue中定义了一个顶部的搜索框

此时需要搜索框输入文字时候点击搜索，在组件cmsMain这个组件中执行检索数据的函数，达到目的

处理办法：

在vue项目中创建一个globalBus.js文件

放入如下代码

import Vue from 'vue';
export const globalBus = new Vue();

具体位置

在有搜索框的组件中引入并且使用

这么来用

先写在搜索框页面

加入一个点击搜索的方法

searchClick

HTML

<el-input placeholder="请输入内容" v-model="keywords" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="作者" value="1"></el-option>
          <el-option label="书名" value="2"></el-option>
          <el-option label="价格" value="3"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>
      </el-input>

 // 点击搜索按钮
      searchClick () {
        globalBus.$emit("searchByKeywords",this.keywords,this.select);
      },

具体位置

代码中

searchByKeywords是一个需要在实际执行的函数组件中定义的，下面会有讲解

注意，别忘记在这两个组件中引入；引入路劲根据你globalBus.js文件位置而定，要不然不起作用

import { globalBus }  from "../../globalBus.js";

上面搜索框的组件的代码已经编写完成

接着需要编写实际执行方的组件的代码

实际执行方组件代码编写


  mounted() {

    globalBus.$on("searchByKeywords", (keywords,select) => {
      console.log('searchByKeywords' + keywords + select)
    });
  }

具体位置

只需要在mounted中加入如上代码，我们执行测试一下哈

以上的方式，是可以的