Vue.js中this.$emit的使用：复用getMembers数据至getMember方法

你完全不需要用this.$emit，因为getMembers已经把用户数据存在了组件的members变量里，直接从这里取对应下标的数据就行，根本不用重新发请求。

修改步骤： #

• 删掉getMember里的Axios请求逻辑，直接从this.members数组中根据传入的idx获取对应用户
• 增加边界判断，防止下标越界导致报错
• 可补充数据未加载完成的处理（比如用户点击过快时，先调用getMembers获取数据）

修改后的完整代码： #

methods: {
  getMembers() {
    this.axios.get('https://randomuser.me/api/?results=5')
      .then(res => {
        this.members = res.data.results;
        console.log(this.members);
      })
      .catch(error => {
        console.log(error);
      })
  },
  getMember(idx) {
    this.modal = true;
    // 先判断数据是否加载完成，且下标在有效范围内
    if (!this.members || idx < 0 || idx >= this.members.length) {
      console.log('用户数据未加载或下标无效');
      // 可选：如果数据没加载，先调用getMembers再取值
      // this.getMembers().then(() => {
      //   this.member = this.members[idx];
      // });
      return;
    }
    // 直接从已有数据中取对应下标的用户
    this.member = this.members[idx];
    console.log(this.member);
  },
},

补充说明： #

this.$emit是用于父子组件间传递数据的API，你当前是同一组件内复用自身已获取的数据，完全用不上它。只要确保getMembers已经执行过（比如在组件的created钩子中调用），members数组存有数据，就能通过下标精准拿到对应用户信息。

内容的提问来源于stack exchange，提问作者Roy