vue组件学习-数据传递-路由（初学者文档二）

Cristic 发布于2019-08-21 17:38 / 1057人阅读

摘要：接上次的验证开始，组件中的作用域都是独立的，子组件的模板不能直接引用父组件的数据，要用特殊方法才能实现数据的传递。，环境的安装第一步新建一个文件夹并初始化第二步安装一级路由这个比较简单，大多应用于单页面应用，不必引入整个路由库。

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

一、父子组件之间的通信

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

三、使用插槽分发内容

    我们使用组件是为了更加的方便我们的工作，但是组件化也有不太方便的地方，就是数据的处理，
为了方便使用组件，可以引入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

关于路由，还有很多值得我们去学习的地方，推荐一个好用的网站
https://router.vuejs.org/zh-c...
这里有最详细的学习路由的知识点

云服务器 GPU云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89809.html

Vue学习日记（三）——Vue路由管理vue-router

摘要：重定向可以实现某些需要根据特定逻辑改变页面原本路由的需求，例如简单的未登录状态下的页面访问个人信息路由时应该重定向到登录路由页面。前言为了给读者更好的体验，去理解vue-router和下一篇介绍vuex，决定还是来一个实战教程来带大家更加的去深入理解vue-router，在这之前，读者先自行了解和去官网下载npm和node，附：npm官网项目构建这里我采用vue-cli+web...

iKcamp 2019-08-30 13:54 评论0 收藏0
Vue学习日记（三）——Vue路由管理vue-router

摘要：重定向可以实现某些需要根据特定逻辑改变页面原本路由的需求，例如简单的未登录状态下的页面访问个人信息路由时应该重定向到登录路由页面。前言为了给读者更好的体验，去理解vue-router和下一篇介绍vuex，决定还是来一个实战教程来带大家更加的去深入理解vue-router，在这之前，读者先自行了解和去官网下载npm和node，附：npm官网项目构建这里我采用vue-cli+web...

tuniutech 2019-08-26 11:34 评论0 收藏0
Vue学习日记（三）——Vue路由管理vue-router

摘要：重定向可以实现某些需要根据特定逻辑改变页面原本路由的需求，例如简单的未登录状态下的页面访问个人信息路由时应该重定向到登录路由页面。前言为了给读者更好的体验，去理解vue-router和下一篇介绍vuex，决定还是来一个实战教程来带大家更加的去深入理解vue-router，在这之前，读者先自行了解和去官网下载npm和node，附：npm官网项目构建这里我采用vue-cli+web...

aboutU 2019-08-01 18:31 评论0 收藏0
初学vue.js记录

摘要：初学应该学习哪些知识主要学习基础知识。接下来要学习如何写函数，计算属性。事件处理与修饰符事件通过指令来绑定，在中事件为事件名，所以是很好记忆的。这时可通过来获取父组件传递的值并写入模板，父组件可通过在子组件写入属性的方式传递数据。前言本人刚开始学习vue.js几天，做了一些练习之后，鉴于每隔一段时间就把学习过的内容总结一番，故此写下此文章。初学Vue.js应该学习哪些知识 1、 v...

enda 2019-08-22 15:34 评论0 收藏0
VUE使用中踩过的坑

摘要：前言如今可谓是一匹黑马数已居第一位前端开发对于的使用已经越来越多，它的优点就不做介绍了本篇是我对使用过程中以及对一些社区朋友提问我的问题中做的一些总结帮助大家踩坑。随后的重新渲染，元素组件及其所有的子节点将被视为静态内容并跳过。前言 vue如今可谓是一匹黑马,github star数已居第一位！前端开发对于vue的使用已经越来越多，它的优点就不做介绍了,本篇是我对vue使用过程中以及...

big_cat 2019-08-22 14:04 评论0 收藏0