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

雨点打透心脏的1/2处 2022-12-22 11:19 152阅读 0赞

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

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

这个方法很简单，我把原理先说一下，单独创建一个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生命周期监听的

[Link 1]: https://blog.csdn.net/rta_bh/article/details/109641731