`
baobeituping
  • 浏览: 1064693 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

vue父子组件之间传值,获取URLJSON和组件之间的引用

    博客分类:
  • vue
 
阅读更多
 

目录(?)[+]

 

已经有几周没有更新博客了,最近自己也在学习就没有能及时抽身来写博客。

 

今天就来简单说一下vue-resource,这是vue的一个与服务器端通信的HTTP插件,用来从服务器端请求数据。话不多说,直接上干货吧。

 

这里PS一下,有人反映之前的代码下载下来,运行会报错而且会有上百个之多,这是因为在我初始化项目的时候没有启用eslint,eslint是用来检测代码风格的,我是觉得格式要求严的有点过分,所以禁用了eslint。如果对eslint感兴趣的朋友,可以看 eslint的官网 了解一下格式的要求和一些相应的配置。

 

我们主要来了解一下以下内容:

 

  • 模拟服务端返回数据
  • 用vue-resource向服务器请求数据

模拟服务器返回数据

 
我们用vue-cli创建的项目中,已经给我们提供了模拟服务器端返回数据的地方和接口。如下图所示,在项目目录的build目录下,有一个dev-server.js,在这个文件中,我们就可以来做一些模拟数据的工作。
 
 

1、准备一个data.json文件

在项目根目录下,新建一个data.json。这个文件里的内容就是我们要模拟的服务端返回的数据。
data.json的内容如下:
[javascript] view plain copy
 
  1. {  
  2.     "books": [  
  3.         { "price""111.00""title""语文""img""http://imgsrc.baidu.com/forum/w%3D580/sign=688d19b6422309f7e76fad1a420f0c39/0e143912b31bb051dfdebf0a327adab44bede0f9.jpg" },  
  4.         { "price""123.00""title""数学""img""http://shopimg.kongfz.com.cn/20130826/1746508/1746508YTGtm0_b.jpg"},  
  5.         { "price""113.00""title""英语""img""http://www.shiyi910.com/UploadFiles/2014-01/170/2014011322414554305.jpg"},  
  6.         { "price""112.00""title""物理""img""http://f.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=b62ac53d4b36acaf59b59ef849e9a126/f603918fa0ec08fa2cf895a359ee3d6d55fbda3e.jpg"}  
  7.     ]  
  8. }  
这里,books字段里的每一个对象表示一本书的信息。
 

2、“写接口”

 
修改dev-server.js文件,在大概第19行左右的 var app = express()之后,添加上如下内容
 
[javascript] view plain copy
 
  1. var appData = require('../data.json')  
  2. var books = appData.books  
  3.   
  4. var apiRoutes = express.Router()  
  5. apiRoutes.get('/books'function(req, res){  
  6.   res.json({  
  7.     data: books  
  8.   })  
  9. })  
  10.   
  11. app.use('/api', apiRoutes)  

简单说明一下,这段代码就是通过请求醒目根目录下的data.json文件,拿到文件的内容并赋值给appData变量,取到里面的books字段内容保存在books变量中。然后,通过express提供的Router对象,以及Router对象的一些方法(这里是get方法)来设置请求的路径,以及请求成功后的回调函数来处理要返回给请求端的数据。最后,我们要“使用”这个Router对象,为了统一管理api接口,我们在要请求的路由前边都加上‘api/’来表明这个路径是专门用来提供api数据的。在这个“接口”中,当我们访问“http://localhost:8080/api/books”路径的时候,就会返回data.json里的books对象给我们。
 
这里我们先来简单验证一下是否能成功返回数据,打开命令行,cd到当前项目目录,运行 npm run dev ,等项目运行成功之后,在浏览器地址栏输入http://localhost:8080/api/books,看到如下图所示,数据正常返回,OK!“接口”就开发完成了。
 
PS:在你的浏览器上可能看到的是没有经过格式化的数据,我的浏览器上装了一个json格式化的插件,这不是重点,重点是“接口”正常工作了,不是吗得意

 

 

用vue-resource向服务器请求数据

1、安装vue-resource

打开命令行,cd到项目目录,运行 npm install vue-resource --save或者cnpm install vue-resource --save,等待安装完成即可。
 

2、在main.js里导入并使用vue-resource

修改main.js如下
 
[javascript] view plain copy
 
  1. // main.js  
  2.   
  3. // 导入Vue,这个是必需的,在使用Vue之前,必须先导入  
  4. import Vue from 'vue'  
  5.   
  6. // 导入 vue-router,并使用  
  7. import VueRouter from 'vue-router'  
  8. Vue.use(VueRouter)  
  9.   
  10. // 导入 vue-resource,并使用  
  11. import VueResource from 'vue-resource'  
  12. Vue.use(VueResource)  
  13.   
  14. // 导入 pages 下的 Home.vue   
  15. import Home from './pages/Home'  
  16. import Detail from './pages/Detail'  
  17.   
  18. // 定义路由配置  
  19. const routes = [  
  20.     {  
  21.         path: '/',  
  22.         component: Home  
  23.     },  
  24.     {  
  25.         path: '/detail',  
  26.         component: Detail  
  27.     }  
  28. ]  
  29.   
  30. // 创建路由实例  
  31. const router = new VueRouter({  
  32.     routes  
  33. })  
  34.   
  35. // 创建 Vue 实例  
  36. new Vue({  
  37.   el: '#app',  
  38.   data(){  
  39.     return {  
  40.         transitionName: 'slide'  
  41.     }  
  42.   },  
  43.   router,  
  44.   watch: {  
  45.     // 监视路由,参数为要目标路由和当前页面的路由  
  46.     '$route' (to, from){  
  47.         const toDepth = to.path.substring(0, to.path.length-2).split('/').length  
  48.         // 官方给出的例子为 const toDepth = to.path.split('/').length 由于现在只有两个路由路径'/'和'/detail'  
  49.         // 按照官方给的例子,这两个路由路径深度都为 2 ,所以,这里稍作调整,不知道有什么不妥  
  50.         // 但目前在这个demo中能正常运行,如果知道更好的方法,欢迎留言赐教  
  51.         const fromDepth = from.path.substring(0, from.path.length-2).split('/').length  
  52.         this.transitionName = toDepth < fromDepth ? 'slide_back' : 'slide'  
  53.         // 根据路由深度,来判断是该从右侧进入还是该从左侧进入  
  54.     }  
  55.   }  
  56. })  
 

3、修改Home.vue和List.vue来接收服务端返回的数据

Home.vue修改如下:
 
[html] view plain copy
 
  1. <!-- Home.vue -->  
  2. <template>  
  3.     <div class="container">  
  4.         <!-- 由于html不区分大小写,所以js中驼峰命名方式在html中要改成用短横线连接的形式 -->  
  5.         <home-header></home-header>  
  6.         <div class="content">  
  7.             <ul class="cont_ul">  
  8.                 <list  
  9.                     v-for="item in items"  
  10.                     :price="item.price"  
  11.                     :title="item.title"  
  12.                     :img="item.img">  
  13.                 <!-- 通过v-bind(简写为“:”)绑定props来从父组件给子组件传值 -->  
  14.                 </list>  
  15.             </ul>  
  16.         </div>  
  17.     </div>  
  18. </template>  
  19. <style>  
  20.     .container {  
  21.         max-width: 640px;  
  22.         margin: 0 auto;  
  23.         overflow-x: hidden;  
  24.     }  
  25.     .cont_ul {  
  26.         padding-top: 0.05rem;  
  27.         margin: 0 -0.12rem;  
  28.     }  
  29.     .cont_ul:after {  
  30.         content: "";  
  31.         display: block;  
  32.         width: 0;  
  33.         height: 0;  
  34.         clear: both;  
  35.     }  
  36. </style>  
  37. <script>  
  38.     // 导入要用到的子组件  
  39.     import HomeHeader from '../components/HomeHeader'  
  40.     import List from '../components/List'  
  41.     export default {  
  42.         data () {  
  43.             return {  
  44.                 items: []  
  45.             }  
  46.         },  
  47.         // 在components字段中,包含导入的子组件  
  48.         components: {  
  49.             HomeHeader,  
  50.             List  
  51.         },  
  52.         // 在组件创建完成时,执行的钩子函数  
  53.         created (){  
  54.             // 在main.js里导入并使用vue-resource之后,就可以通过this.$http来使用vue-resource了,这里我们用到了get方法  
  55.             this.$http.get('/api/books').then((data) => {  
  56.                 // 由于请求成功返回的是Promise对象,我们要从data.body.data拿到books数组  
  57.                 this.items = data.body.data;  
  58.             })  
  59.         }  
  60.     }  
  61. </script>  


 
List.vue修改如下:
[html] view plain copy
 
  1. <!-- List.vue -->  
  2. <template>  
  3.     <li class="sec_li">  
  4.         <router-link to="/detail" class="lp_li_a">  
  5.             <div class="lp_li_imgWrap">  
  6.                 <img :src="img" alt="">  
  7.             </div>  
  8.             <p class="lp_li_name">{{ title }}</p>  
  9.             <p class="lp_li_price">¥{{ price }}元</p>  
  10.         </router-link>  
  11.     </li>  
  12. </template>  
  13.   
  14. <style scoped>  
  15.     .sec_li {  
  16.         float: left;  
  17.         width: 50%;  
  18.         margin-bottom: 0.1rem;  
  19.     }  
  20.     .lp_li_a {  
  21.         display: block;  
  22.         padding: 0.3rem 0;  
  23.         margin: 0 0.05rem;  
  24.         text-align: center;  
  25.         background: #fff;  
  26.     }  
  27.     .lp_li_imgWrap {  
  28.         padding: 0.24rem 0;  
  29.     }  
  30.     .lp_li_imgWrap > img {  
  31.         width: auto;  
  32.         height: 2.3rem;  
  33.     }  
  34.     .lp_li_name {  
  35.         height: 0.5rem;  
  36.         line-height: 0.5rem;  
  37.         font-size: 16px;  
  38.         color: #333;  
  39.     }  
  40.     .lp_li_price {  
  41.         height: 0.5rem;  
  42.         line-height: 0.5rem;  
  43.         font-size: 16px;  
  44.         color: #fb3b3b;  
  45.     }  
  46. </style>  
  47.   
  48. <script>  
  49.     export default {  
  50.         // 接收父组件传过来的以下几个属性  
  51.         props: ['price', 'title', 'img'],  
  52.     }  
  53. </script>  

然后,再回到浏览器,应该会看到如下图的效果了。
 
 
 
搞定!数据成功接入,可以来杯咖啡放松一下,回味一下整个过程的实现了。
 
分享到:
评论

相关推荐

    Vue 组件间传值及事件触发Demo

    总结:Vue组件间传值和事件触发是构建可复用、可维护应用的基础。通过`props`、`v-model`、`$emit`、`Vuex`等手段,我们可以有效地管理组件间的数据流动,同时通过自定义事件和事件回调实现组件间的交互。理解并熟练...

    vue3组件传值,父子兄弟组件传值

    vue3父子组件传值,vue3组件传值,父子兄弟组件传值,props、emit、eventbus

    vue父子组件之间的传值.md

    vue父子组件之间的传值.md

    vue3父子组件传值.doc

    在Vue3中,父子组件之间的通信方式相比Vue2有所改变,更加简洁且高效。本文将详细探讨Vue3中如何使用`setup`语法糖格式来实现父子组件的数据传递,包括`defineProps`和`defineEmits`这两个关键函数的用法。 ### 1. ...

    VUE 父子组件传递

    HTML编码中,利用了Vue框架,在该框架下父子组件直接经常需要进行数据传递

    vue深层组件嵌套传值.md

    在父组件A 里 引入了子组件B , 但同时B组件又是子组件C的父组件,C又是子组件D的父组件 那么, A组件分别向B ,C ,D传值是如何实现的? D组件又是如何分别向C B A 传值的

    vue父子组件传值案例

    在这个“vue父子组件传值案例”中,我们将深入探讨Vue 2.x版本中的父子组件通信机制,包括父组件如何向子组件传递数据以及子组件如何向父组件发送消息。 一、父组件向子组件传值 在Vue中,父组件向子组件传递数据...

    Vue非父子组件之间传值

    然而,在实际应用中,我们常常需要非父子组件之间进行通信。由于Vue的单向数据流原则,直接修改父组件的值在子组件中是不被推荐的,因此需要采取其他方法来实现实现组件间的数据传递。这里介绍的就是使用“Bus”(或...

    Vue 最常用不同组件传值

    1. **父子组件传值**:这是最常见也是最直接的方式,通过`props`向下传递数据,通过`$emit`触发自定义事件向上发送数据。 2. **兄弟组件传值**:兄弟组件间由于没有直接的父子关系,通常可以通过父组件作为中介来...

    解决vue组件props传值对象获取不到的问题

    先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1、home.vue(父组件)–personal是被传的参数 &lt;!--子组件...

    vue2.0组件之间传值、通信的多种方式(干货)

    这次我们就来聊一聊vue2.0组件之间传值、通信的多种方式。 一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件、钩子函数等) this.$router.push({ path: '/...

    vue非父子界面传值(广播方式)需要使用的vueEvent.js

    采用广播方式对非父子界进行传值,需要依赖的vueEvent.js

    vue.js 传值方法(父子组件传值、非父子组件传值)

    在Vue中,有多种方式实现组件之间的数据传递,主要包括父子组件间通信和非父子组件间通信。 **一、父子组件传值** 1. **父组件向子组件传递值** - 基本原理:使用`props`属性从父组件向子组件传递数据。 - 步骤...

    浅谈Vue父子组件和非父子组件传值问题

    Vue 组件传值问题是 Vue 开发中非常重要的一个话题,涉及到父子组件和非父子组件之间的传值问题。今天,我们将一步步地介绍如何在 Vue 中实现组件传值。 组件的创建 创建组件是 Vue 开发的基础步骤。下面是一个...

    vue实现组件之间传值功能示例

    本篇文章将深入探讨如何在Vue中实现组件之间的传值功能,包括父子组件之间的双向通信。 首先,我们来看一下如何通过`props`实现父组件向子组件的传值。在Vue中,父组件可以通过在子组件标签上设置属性来传递数据。...

    详解vue父子组件间传值(props)

    本篇文章主要介绍了详解vue父子组件间传值(props),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    vue组件间的传值-小案例

    在Vue.js框架中,组件是构建用户界面的基本单元,它们可以独立地管理和更新各自的视图。组件间的通信是实现复杂应用交互的关键。本教程通过几个小案例,详细讲解了Vue中父组件向子组件传递数据、子组件向父组件回传...

    浅谈vue父子组件怎么传值

    总结来说,Vue提供了简洁的props和自定义事件机制来处理父子组件之间的数据流动。理解并掌握这些机制对于构建Vue应用至关重要。通过props,父组件可以向下传递数据给子组件;通过自定义事件,子组件能够向上通知父...

    【JavaScript源代码】vue3 父子组件传值详解.docx

    Vue3 父子组件之间的通信是 Vue.js 开发中非常关键的一部分,相较于 Vue2,Vue3 在数据处理和响应式系统上进行了重大改进。在 Vue2 中,我们主要依赖 `props` 从父组件向子组件传递数据,并通过 `this.$emit` 事件...

    Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)

    Vue2.0 传值方式: 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来。...引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给

Global site tag (gtag.js) - Google Analytics