vue笔记

一、组件间传值

1.父向子传值

使用props自定义属性

传对象数据过去的时候，实际上是传过去了引用。
不建议改变props的值。

2.子向父传值

使用自定义事件

3.兄弟之间传值

使用Eventbus.js

二、路由

1.哈希地址（Hash地址）

#后面的是哈希地址（包括#号）

补充知识：拿到路径参数（/后面），查询参数（？后面），完整路径的值

2.前端路由

（1）是什么

Hash地址与组件之间的对应关系（path和component之间的对应关系）

（2）工作方式

3.vue官方给出的路由解决方案vue-router

（1）使用步骤

（使用vue-cli创建时，若勾上创建路由，会自动帮我们进行以下步骤）

a)安装vue-router包

直接去找官网看

b)创建路由模块

c)在main.js里导入并挂在路由模块

d)声明路由链接（路由规则）和占位符

在页面中使用占位符
在路由模块（router文件夹里面的index.js）中声明路由链接

（2）子路由规则

在src/router/index.js 路由模块中，导入需要的组件，并使用children属性声明子路由规则。

因为，tab1组件、tab2组件显示在About组件里；
且，子路由如何跳转及显示的位置，要写在父组件那里；
所以，这里的子路由如何跳转及显示的位置写在了About组件里。

小tips：默认显示哪个组件，可以利用路由的重定向，也可以使用默认子路由，见下图。

如果开启了默认子路由，前面router-link to="路径"记得改。

（3）动态路由匹配

a)可以解决什么问题

例子：动态显示电影1、电影2…电影n

b)动态路由是什么

c)如何取得动态的参数项？

·方式1

取得之后，就可以向后端发起请求获得数据了。
this.$route.params.mid中：this可以省略，mid是你在路由规则中自己起的名字，this.$route是路由的“参数对象”
this.$router是路由的“导航对象”

·方式2（简单一点）：为路由规则开启props传参

（4）声明式导航&编程式导航

go(-1)后退一层，如果后退成熟超过上限，则原地不动
go(1)前进一层

（5）导航守卫

全局前置守卫

在router文件夹里的index.js文件里设置全局前置导航守卫。
只要发生了路出的跳转,必然会触发beforeEach 指定的 function回调函数。
注意：父路由设置了路由守卫，子路由也应该设置路由守卫，不然路由守卫会失败

三、Tips

• 在进行模块化导入的时候，如果给定的是文件夹，则默认导入这个文件夹下，名字叫做index.js的文件。

• 小知识点：data函数执行时，才给this身上添加data函数return对象里的属性
  所以在data函数里面this.a或者this.b都是访问不到值的，没挂载访问的就是undefined
  记住:不要在data函数里写this.
  

• this在标签中使用可以省略

•