接上次的props验证开始，组件中的作用域都是独立的，子组件的模板不能直接引用父组件的数据，要用特殊方法才能实现数据的传递。

一、父子组件之间的通信

实例，点击子组件的内容，子组件自增一的同时，父组件的内容也同时增加一。        HTML代码：          
    
                 {
   { total }}            
                 
                 
               
    
        JS部分内容：                      

二、非父子之间通信

当我们需要在费父子之间的通信的时候，我们需要新建一个空的组件，在A组件中创建一个监听事件来监听B组件。同时我们也需要在B组件中建一个方法，来触发A组件的事件        示例代码：        
    
            
                 
               
    
                    

三、使用插槽分发内容

我们使用组件是为了更加的方便我们的工作，但是组件化也有不太方便的地方，就是数据的处理，为了方便使用组件，可以引入slot元素作为数据插槽来进行数据的处理分发。当我们使用这个元素，模板的内容不会被替换掉，保留在我们想要插入的地方。    示例代码：    HTML部分：        
    
            
                     
      
       头部内容
      
                2222                
      
       底部内容
      
            
             
    
    JS部分：                

四、vue的路由部分

在这个部分，基本都推荐使用官方路由，更有官方文档可以查看更加详细内容，这里我就简单做一下示例。  ①，环境的安装    第一步：新建一个文件夹并初始化    npm init -y    第二步：安装    npm i -S vue vue-router    npm i -S axios      4.1一级路由：这个比较简单，大多应用于单页面应用，不必引入整个路由库。      
    
        
     
      新闻管理
             
     
      商城管理
             
     
          
              
     
      
    
                          4.2 动态路由：当ID不同的用户使用的时候，就需要这个组件来渲染    示例：        
    
        
     
      /user/foo
             
     
      /user/foo
             
           
    
                          4.3、监听路由变化    示例：            
    
          
     
      /user/foo
               
     
      /user/bar
               
             
    
                            

关于路由，还有很多值得我们去学习的地方，推荐一个好用的网站