vue组件与路由

一、子组件传值父组件

步骤：

1、子组件调用父组件的方法：

（1）在父组件中给引用的子组件注册一个事件

（2）子组件可以触发这个事件￥emit('事件名字')

2、子组件给父组件传递数据

（1）$emit方法第二个参数可以定义子组件给父组件传递的内容

（2）在父组件中怎么拿到数据：

如果父组件这个方法没有自定义参数，在父组件的方法直接加这个参数就可以拿到；

如果父组件有自定义参数，可以歘人$event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。

 

 

二、ref的使用

1、获取dom节点

（1）给dom节点记上ref属性

（2）加上ref之后，在$refs属性中多加了这个元素的引用

（3）通过vue实例的$refs属性拿到这个dom元素

 

2、获取组件

三、什么是路由

1、后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源

2、前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现

四、路由的基本使用

1、引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）

2、创建路由new VueRouter(),接受的参数是一个对象

3、在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性

4、path属性是url的地址,component属性就是显示的组件（传组件的对象）

5、创建的路由需要和vue实例关联一下 

6、路由到的组件显示在哪个位置<router-view></router-view>

 

五、路由跳转的两种方式

1、声明式：

2、函数式

 

六、路由传参的两种方式

1、声明式

 2、函数式

 

七、路由重定向

八、路由高亮

1、使用默认样式：直接设置router-link-active

 

 2、自定义样式：配置 linkActiveClass:'自定义的类名'

 

九、组件嵌套

1、声明路由的时候设置children,这是children是一个数组，数组里是路由对象

2、这个children的组件就会渲染在它父组件的<router-view>中

 

 

十、命名视图

1、我们之前只能一个地址对应一个组件，现在可以一个地址对应多个组件

2、components属性设置的

3、给router-view设置名字，这个名字和components组件名字是对应的

4、设置默认值default对应组件可以设置名字也可以访问

目录

一、子组件传值父组件

二、ref的使用

三、什么是路由

四、路由的基本使用

五、路由跳转的两种方式

六、路由传参的两种方式

七、路由重定向

八、路由高亮

九、组件嵌套

十、命名视图

 十一、计算属性和监听器

---

案例：将姓氏和名字连接起来：