Vue 组件通信与路由

组件通信

1.组件通信

• (1) props $emit解决父子组件层数较少的情况
• (2) $attrs $listeners 解决组件嵌套多层关系
• (3)中央事件总线$bus new Vue( )
• $on() $emit 挂载的同-个实例化对象解决兄弟组件传值
• 5(4) vuex的流程图脑子要有这个概念
  2.声明周期的图示
  3.路由的使用
• 3.1引入包(两个全局的组件router-link to属性
• router-view (匹配路由组件的出口) )
• 3.2创建实例化VueRouter对象
• 3.3匹配路由规则
• 3.4挂载new Vue( )实例化对象中
• 给vue实例化对象挂载了两个对象this . $router (它就是VueRouter) thi . $route (
• 配置路由信息的对象)

路由解析

命名路由
绑定自定义的属性:to =" {name: '路由的名字'}”
路由的参数
path: ' /user/:id
:to= "{name: 'user' , params:{id:1}}"
path: ' /user'
:to= " {name:'user' , query:{userId:1}}"
嵌套路由(应用子的路由是不同的页面结构)
/home/music ===> /home/ movie
一个router-view中嵌套 另外一个route-view

代码实现

  
  登录页面
  注册页面
  

    
  

  
`