vue非父子组件之间传值

最新推荐文章于 2025-06-17 10:37:35 发布

原创最新推荐文章于 2025-06-17 10:37:35 发布 · 757 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#项目中遇到的问题

项目专栏收录该内容

23 篇文章

订阅专栏

记录第一次做项目遇到的坑，可能说的有所欠缺，但是功能是实现的。

为了实现头部的搜索框，搜索table表格中的数据，因为是两个页面，所以需要组件传值。

首先，main.js中创建事件中心eventHub

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  // 非父子组件传递数据,创建事件中心eventHub
  data: {
    eventHub: new Vue()
  }
})

然后在Header.vue页面的input输入框绑定一个变量v-model，点击icon图标触发点击事件，methods下的eve()方法传递数据

<div class="head-content-search">
                <input type="text" v-model="searchKey" class="username" placeholder="请输入身份证号或姓名"/>
                <i class="icon-search" @click="eve()"></i>
            </div>

// 非父子组件传递数据
            eve() {
                this.$root.eventHub.$emit('change',this.searchKey); //eventHub触发事件
            }

最后在home.vue页面created里接收数据

// 非父子组件通信接收数据
    this.$root.eventHub.$on('change', (searchKeydata) => { //eventHub接收事件
        // 做正则判断，判断搜索框输入的是身份证或姓名
        var reg=/^[\u4e00-\u9fa5]+$/;
        if (reg.test(searchKeydata)) {
          this.searchKey2 = searchKeydata
          this.searchKey1 = ''
        } else {
          this.searchKey1 = searchKeydata
          this.searchKey2 = ''
        }
        this.getList(1)
    });