记录第一次做项目遇到的坑，可能说的有所欠缺，但是功能是实现的。
为了实现头部的搜索框，搜索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)
});