26-vue-users_page项目的自我心得

1.项目展示图片

2.心得

   2.1通信方式的确定，要搞清楚组件之间的关系–消息的订阅与发布
   分析：搜索区(search组件)和展示区(main组件)，属于 兄弟组件，通信方式就使用 消息的订阅与发布，这样可以实直接传输信息。(若使用props方法的话，就需要通过他们的父组件进行逐层传递，麻烦)。

   2.2消息的订阅与发布中，要搞清楚两个问题：谁来进行消息的发布？谁来进行消息的发布？
  分析：search组件要将用户输入信息，点击搜索，再将其输入的信息传给main组件，main组件在进行ajax请求数据，并在展示区(main组件)展示。
   结论：search组件来发布消息(触发事件)，main组件来订阅消息(监听事件并执行相应的逻辑)
  search组件点击触发事件 — 发布消息 应该写在点击事件里面，点击事件应该写在methods。
  main组件监听事件 —订阅消息 应该写在mounted 部分。
 
  2.3使用ajax时，要搞清楚两个问题：在那个组件里发送？发送的时机？
  本次项目，应该在mian组件中发送ajax请求，并将返回的数据展示在main组件(展示区)； 应该在用户点击搜索按钮之后，（mian组件订订阅消息后） 才进行ajax的请求（相应的代码应该写在mounted勾子中)

 

3.用到的数组方法

3.1数组中的map方法：

3.1.1理解

  从一个数组中的每个对象元素中抽取个别属性，作为一个对象放在相同的下标位置，要用数组的map方法。(已有数组和要返回的数组 两者的对象元素个数相同，但元素对象里面的属性名不相同)

3.1.2代码示例

// 数组中的map方法：从一个数组中的每个对象元素中抽取个别属性，作为一个对象放在相同的下标位置，要用数组的map方法。(已有数组和要返回的数组  两者的对象元素个数相同，但元素对象里面的属性名不相同)
const users = result.items.map(item => ({  //item是数组中对象元素
	name:item.login,  //将items 数组中每个对象的item.login属性值赋给新数组users中每个对象元素的name属性。(下同)
	url:item.html_url,
	avatar_url:item.avatar_url
})

   常用的数组方法：filter() map() reduce() find() 。前两种方法会返回一个新数组。