vue子组件和子组件之间的传参

因项目需求，我把同一个界面中的两个部分拆分成了两个组件，但是之间又有关联，需要用户在一个组件中输入参数，然后再另一个组件需要这个参数来进行操作。就像商城中的搜索（组件A），然后展示列表（组件B），组件A给组件B传入输入的参数为组件B筛选列表使用。

经过我在网上搜索的方法，和后来项目遇到子路由需要调用父路由的方法，我在另外一个博客也写了，同样适用本例，原理都是一样的。下面我主要写第一个方法。另外一种方法你可以去看我的另外一个博客。

这个方法很简单，我把原理先说一下，单独创建一个js文件用来创建一个新的vue实例，然后给暴露出去，供两个组件引用。然后再其中一个组件使用新建的vue实例监听一个事件，如组件B需要监听一个事件，组件A负责使用新建的vue实例来触发这个事件，就是这么简单。

下面上代码：

新建一个js文件：

import Vue from 'vue'

export default new Vue;

然后再在两个子组件中分别引入此实例

组件A:

<template>
    <el-button class="from-button" @click="search">搜索</el-button>
</template>
<script>
import evenClick from "./js/evenClick";
import $ from 'jquery'

export default {
    name: "search",
    methods: {
        search: function () {
            let searchData = $('#searchData').val()
            evenClick.$emit('searchData', searchData);
        }
    }
</script>

组件B:我是在的mounted生命周期监听的

<script>
    import evenClick from "./js/evenClick";
    import $ from 'jquery'

    export default {
        name: "commodity",
        mounted() {
            evenClick.$on('searchData', function (msg) {
                console.log('此处触发结果', msg)
            }
        }
    }
</script>