vue非父子组件之间传值

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

为了实现头部的搜索框，搜索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)

});