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

首先

看下我们的具体情况

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

其中有 

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>

JS

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

具体位置 

 

代码中

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

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

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

 

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

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

实际执行方组件代码编写

Js

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

具体位置

 

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

 

以上的方式，是可以的