Github 用户查询案例【基于Vue2全局事件总线通信】
warning:
这篇文章距离上次修改已过245天，其中的内容可能已经有所变动。
<template>
<div>
<input type="text" v-model="searchText" @keyup.enter="search" />
<button @click="search">搜索</button>
</div>
</template>
<script>
export default {
data() {
return {
searchText: ''
};
},
methods: {
search() {
if (this.searchText.trim() === '') {
alert('搜索内容不能为空！');
return;
}
// 使用全局事件总线发送搜索事件
this.$EventBus.$emit('search', this.searchText);
}
}
};
</script>这个简单的Vue组件包含了搜索框和按钮，用户可以在输入框输入文本并按下回车键或点击按钮进行搜索。如果用户输入的文本为空，则会弹出警告提示。搜索事件通过Vue的全局事件总线（EventBus）发送给监听该事件的其他组件。这是一个典型的Vue应用中使用事件总线进行组件间通信的例子。
评论已关闭