vue的传参方式汇总和router使用技巧

一、介绍

在Vue框架中，我们经常需要进行组件之间的传值，根据传参的方式不同，我们又可以将其分为props、$emit、vuex、router、cookie等等。其中，props与$emit的传参方式主要用于组件之间传值，其余的传参方式则主要用于组件之间以及前后端之间的数据交互。

在本篇文章中，我们将对vue的传参方式进行详细的汇总，同时也会涉及到router的使用技巧。

二、props

在Vue中，我们可以在父组件中通过props向子组件传递值。props主要分为两个部分：prop验证和使用props。

1．prop验证

当子组件通过props接收到父组件传递的数据时，我们可以设置一些验证规则以确保数据的正确性。prop验证主要有以下两种方式。

（1）类型验证

props: {
  // 基础类型检测
  propA: Number,
  // 多种类型
  propB: [String, Number],
  // 必传且为字符串
  propC: {
    type: String,
    required: true
  },
  // 带有默认值的数字
  propD: {
    type: Number,
    default: 100
  },
  // 带有默认值的对象
  propE: {
    type: Object,
    default: function () {
      return { message: 'hello' }
    }
  },
  // 自定义验证函数
  propF: {
    validator: function (value) {
      // 这个值必须匹配下列字符串中的一个
      return ['success', 'warning', 'danger'].indexOf(value) !== -1
    }
  }
}

（2）对象验证

const myObject = {
  name: String,
  age: Number
};

props: {
  obj: {
    type: Object,
    validator(value) {
      return Object.keys(value).every(key => Object.keys(myObject).includes(key)); // 第二个对象不允许有不在第一个对象上的key存在。
    }
  }
},

2．使用props

当父组件向子组件传递了值后，我们可以在子组件的template模版中通过{{prop名称}}的方式调用。

<!-- 父组件模版 -->
<template>
  <ChildComponent propA="123" :propB="456">
</template>

<!-- 子组件模版 -->
<template>
  <div>
    <div>{{propA}}</div>
    <div>{{propB}}</div>
  </div>
</template>

<!-- 子组件script中 -->
<script>
export default {
  name: 'ChildComponent',
  props: {
    propA: String,
    propB: Number
  }
}
</script>

三、$emit

与props不同，$emit主要用于子组件向父组件传值。当子组件需要向父组件传值时，我们可以在子组件的methods中使用$emit方法，从而触发父组件中的相应事件，进而实现数据的传递。

<!-- 父组件模版 -->
<template>
  <ChildComponent v-on:myevent="handleEvent"/>
</template>

<!-- 子组件模版 -->
<template>
  <button v-on:click="myClickEvent">点击</button>
</template>

<!-- 子组件script中 -->
<script>
export default {
  name: 'ChildComponent',
  methods: {
    myClickEvent(){
        this.$emit('myevent', 'hello,world');
    }
  }
}
</script>

四、vuex

随着项目的不断发展，组件之间和前后端数据的交互也会变得越来越复杂。这时候，我们需要使用状态管理来管理全局状态。在Vue框架中，我们可以使用vuex来进行状态管理。

vuex主要包含以下4个主要部分：State、Getter、Mutation和Action。

1. State

我们可以使用State来定义数据存储的状态，state一般用来保存全局的数据。

// 存放全局的数据
const state = {
  count: 0
};

1. Getter

当我们需要对state中的数据进行处理时，我们可以使用Getter。Getter可以对state的数据进行一些计算操作，然后返回计算后的值，而无需修改state中的实际数据。

// 获取指定的数据
const getters = {
  getCount(state) {
    return state.count
  }
}

1. Mutation

当我们需要修改state中的数据时，我们可以使用Mutation。Mutation主要用于同步操作，当Mutation被触发时，state中的数据也会被同步更新。

const mutations = {
  increment(state) {
    state.count++
  },
  decrement(state) {
    state.count--
  }
}

1. Action

当需要执行一些异步操作时，我们可以使用Action。Action通过提交Mutation来改变状态。

const actions = {
  async increment(context) {
    context.commit('increment')
  },
  async decrement(context) {
    context.commit('decrement')
  }
}

五、router

在实际项目开发中，随着前端单页应用的流行，我们经常需要使用router来进行页面之间的跳转。在Vue框架中，我们可以使用vue-router来进行路由管理。

1．基本路由配置

在路由管理中，我们需要首先配置路由，然后使用路由对象来进行跳转。

import Vue from 'vue';
import Router from 'vue-router';
// 组件的引入
import Main from './views/Main.vue';
import Detail from './views/Detail.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      component: Main
    },
    {
      path: '/detail/:id',     // 带有参数的跳转
      component: Detail
    }
  ]
});

2．路由跳转

当路由对象配置完成后，我们就可以使用它来进行页面跳转。我们可以在组件的js文件中使用$router.push方法来进行跳转。

// 带有参数的跳转
this.$router.push('/detail/' + this.id);

3．路由参数获取

当我们通过路由进行页面跳转后，我们需要在跳转后的页面中获取到路由参数。在Vue框架中，我们可以使用$route.params来获取路由参数。

// 获取路由参数
this.$route.params.id

六、总结

本篇文章从props、$emit、vuex和router四个方面对Vue的传参方式进行了整理，并且详细介绍了router的使用技巧。在实际项目中，我们可以根据具体需求进行选择，以便更好地进行数据流管理和页面跳转。