note

---

前几天学完了 ssm，找了个小项目练练手，老师又催我学前端的 Vue，于是 JavaScript 和 Vue 同时开始学习，目前算是大体上了解了。
下面讲讲我的学习心得：

1. 组件通信

---

1. props $emit
   解决父子组件层数较少的情况
2. $attrs $listeners
   解决组件嵌套多层关系
3. 中央事件总线 $bus new Vue()
   $on() $emit 挂载的同一个实例化对象 解决兄弟传值
4. vuex 的流程图
   脑子要有这个概念

2. 生命周期的图示

Vue生命周期图示.png

---

生命周期非常重要，但也如官方文档中所讲的，没有必要第一次用就学得通透，学习到不同阶段返回过来看，收货也颇多

3. 路由的使用

---

1. 引入包

   • 两个全局的组件对象：
     router-link(to 属性)
     router-view(所有匹配路由组件的出口)
   • 引入包之后，给 vue 实例化对象挂载了两个对象 this.$router(它就是 VueRouter 对象) 和 this.$route(配置路由信息的对象)

2. 创建实例化 VueRouter 对象

3. 匹配路由规则

• 命名路由：绑定自定义的属性(:to="{name:'路由的名字'})

• 路由的参数 params：
  pathh:'/user/:id
  :to="{name:'user', params:{id:1}}"

  path:'/user/'
  :to="{name:'user', query:{userId:1}}"

• 嵌套路由
  一个 router-view 中嵌套另一个 router-view
  应用: 子的路由是不同的页面结构(eg: /home/music ===> /home/movie)

4. 挂载 new Vue()实例化对象中