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

代码实现

代码语言：javascript复制

    <!-- 路由的实现
    （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>`

vue.js

0 人点赞