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

代码实现

<!-- 路由的实现
  （1）传统的开发方式url改变后，立刻发生请求相应这个页面，有可能资源过多，传统开发会让页面出现白屏
  （2）SPA 单页面应用 Single Page Application
  锚点值改变后
  不会立刻发送请求，而是在某个合适的时机，发送请求ajax 页面局部渲染
  优点：页面不立刻跳转 用户体验好
   
   -->
  
  <a href="#/login">登录页面</a>
  <a href="#/register">注册页面</a>
  <div id="app">
    
  </div>
  <script type="text/javascript">
    var oDiv=document.getElementById('app');
    
    window.onhashchange=function(){
      console.log(location.hash);
      switch(location.hash){
        case '#/login':
        oDiv.innerHTML='<h2>我是登录页面</h2>'
        break;
        case '#/register':
        oDiv.innerHTML='<h2>我是注册页面</h2>'
        break;
        default:
        break;
      }
    }
  </script>
</body>`