组件和路由

子传父

子组件调用父组件的方法

1. 在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）
2. 子组件可以触发这个事件$emit('事件名字

   

   

   

   

   

   

   

   

   

       

   

   

   

 ref的使用

1. 获取dom节点

1. 给dom节点记上ref属性，可以理解为给dom节点起了个名字。
2. 加上ref之后，在$refs属性中多了这个元素的引用。
3. 通过vue实例的$refs属性拿到这个dom元素。

1. 获取组件

1. 给组件记上ref属性，可以理解为给组件起了个名字。
2. 加上ref之后，在$refs属性中多了这个组件的引用。
3. 通过vue实例的$refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据。

  

  

  

  

  

  

    

    

哈哈哈， 今天天气太好了！！！

    

---

    

  

  

路由的基本使用

1. 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）
2. 创建路由new VueRouter(),接受的参数是一个对象
3. 在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
4. path属性是url的地址,component属性就是显示的组件（传组件的对象）
5. 创建的路由需要和vue实例关联一下

路由的跳转

1. router-link标签可以设置to属性
2. 默认是a标签，可以通过tag设置包裹标签

路由重定向

redirect可以进行路由的重定向

选中路由高亮

1. 使用默认的样式

直接设置r

1. 自定义样式

配置 linkActiveClass:'自定义的类名'

   

   

   

   

   

   

   

   

       

   

   

   

   

   

   

   

   

   

   

   

   

   

   

        去详情页

        shouye

        geren

       

   

   

   

   

   

定义参数

通过query的方式在url后加?参数名=参数的值

获取参数：$route.query.参数名

使用浏览器参数的方式传递参数

1. 设置路由的时候/路由地址/:参数名
2. 获取参数$route.params.参数名

组件的嵌套

1. 声明路由的时候设置children,这是children是一个数组，数组里是路由对象
2. 这个children的组件就会渲染在它父组件的中