Github 用户查询案例【基于Vue2全局事件总线通信】

作者：System 时间：2024年08月26日分类：所有,html 字数：637

这篇文章距离上次修改已过220天，其中的内容可能已经有所变动。

<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应用中使用事件总线进行组件间通信的例子。

Github 用户查询案例【基于Vue2全局事件总线通信】

评论已关闭

推荐阅读