Vue之单文件组件的数据传递,axios请求数据及路由router

1.传递数据

例如,我们希望把父组件的数据传递给子组件.

可以通过props属性来进行传递.

传递数据三个步骤：

步骤1:在父组件中，调用子组件的组名处，使用属性值的方式往下传递数据

<Menu :mynum="num" title="home里面写的数据"/>

# 上面表示在父组件调用Menu子组件的时候传递了2个数据：
  如果要传递变量[变量可以各种类型的数据]，属性名左边必须加上冒号:，同时，属性名是自定义的，会在子组件中使用。
  如果要传递普通字符串数据，则不需要加上冒号:

步骤2 :在子组件中接受上面父组件传递的数据，需要在vm组件对象中，使用props属性类接受。

<script>
  export default {
    name:"Menu",
    props:["mynum","title"],
    data: function(){
      return {
        msg:"这是Menu组件里面的菜单",
      }
    }
  }
</script>

// 上面 props属性中表示接受了两个数据。

步骤3:在子组件中的template中使用父组件传递过来的数据.

<template>
    <div id="menu">
      <span>{{msg}}，{{title}}</span>
      <div>hello，{{mynum}}</div>
  </div>
</template>

最终效果:

总结:关于这次数据传送的流程,请看下图

注意事项

使用父组件传递数据给子组件时, 注意一下几点:

传递数据是变量,则需要在属性左边添加冒号.

传递数据是变量,这种数据称之为"动态数据传递"

传递数据不是变量,这种数据称之为"静态数据传递"
父组件中修改了数据,在子组件中会被同步修改,但是,子组件中的数据修改了,是不是影响到父组件中的数据.

这种情况,在开发时,也被称为"单向数据流"

2.axios数据请求

2.1 axios包的下载与使用

默认情况下，我们的项目中并没有对axios包的支持，所以我们需要下载安装。

在项目根目录中使用 npm安装包

npm install axios

接着在main.js文件中，导入axios并把axios对象挂载到vue属性中多为一个子对象，这样我们才能在组件中使用。

详见代码:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App' // 这里表示从别的目录下导入 单文件组件
import axios from 'axios'; // 从node_modules目录中导入包
Vue.config.productionTip = false

Vue.prototype.$axios = axios; // 把对象挂载vue中

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
});

View Code

2.2 在组建中使用axios获取数据

<script>
  export default{
    。。。
    methods:{
      get_data:function(){
         // 使用axios请求数据
        this.$axios.get("http://wthrcdn.etouch.cn/weather_mini?city=深圳").then((response)=>{
            console.log(response);
        }).catch(error=>{
            console.log(error);
        })
      }
    }
  }
</script>

View Code

使用的时候，因为本质上来说，我们还是原来的axios，所以也会收到同源策略的影响。

3.路由（Router）

Router 安装:

npm install --save vue-router

路由：把组件和对应的 uri地址进行一一映射的关系。

3.1 创建路由文件

　　路由文件可以直接创建在src目录下，但是如果项目大了，分成多个不同的大平台或者大的子项目，可以选择分目录保存路由，

1. src/router/index.js 　　 // 前台路由

2. src/router/backend.js 　　// 后台路由

创建路由

步骤1:在index.js文件中编写初始化路由信息,以及绑定地址和组件的映射关系

import Vue from 'vue'
import Router from 'vue-router'

// 导入路由中需要使用的组件
import Home from '@/components/Home'
// import AddNum from '@/components/AddNum'
import HelloWorld from '@/components/HelloWorld'

// 让Vue启用Router路由
Vue.use(Router);


export default new Router({
   // 声明项目的路由列表
  routes:[
    //路由信息
    { path:'/home',  // 用于访问的路径地址
      name:'Home',    // 在组件视图中，以后生成url地址时使用的别名，一般和组件名保持一致，方便维护
      component:Home,  // 这不是字符串，是导入的组件对象
    } ,
     { path:'/hello',
      name:'HelloWorld',
      component:HelloWorld,
    }
  ]
})

View Code

步骤2 index.js路由信息要被main.js加载,所以需要在src/main.js中导入路由对象,详情如下

步骤3:在main.js中的Vue对象中注册了路由以后,那么直接在App.vue文件中的html代码里面,显示当前uri路径对应的组件内容.

3.2 站内链接生成:

　　实现生成站内连接.可以使用vue-router提供的路由标签也可以使用vue-router提供的this.$router

　　通过链接可以切换路由标签里面对应的组件，链接的地址是上面index.js文件中定义的path值，不过链接标签是"router-link",链接地址用'to'来定义：

<router-link to="/">站点首页</router-link>
<router-link to="/num">AddNum</router-link>

链接地址中可以传递参数，格式如下：

// name对应的是路由中定义的一个path对应的name属性
    <router-link :to='{name:"UpDate",params:{code:item.code}}'>

有时候需要在组件的js中跳转页面，也就是改变路由，改变路由有下面这些方式：

// 当前页面重新加载
this.$router.go('/user');

// 跳转到另外一个路由
this.$router.push({path:'/user'});

// 获取当前的路由地址
var sPath = this.$route.path;