Vue组件之间传递参数




文章目录

  • Vue组件之间传递参数
  • 路由传参
  • props
  • Vuex
  • 浏览器缓存




Vue的组件与组件之间各自定义的变量是无法共享的，需要通过其他方式进行共享，比如使用vuex集中管理所有组件的状态，还可以使用props传递参数，props一般用户父子组件之间的通信。

路由传参

在传递一些数据量小并且非隐私变量的时候，比如id、key、username等等，我们可以把变量放在路由中。我一般使用以下两种方式进行传参：

1. params

this.$router.push({
  name:'user',  // 路由
  params:{      // 待传递的参数
     id: this.id
  }
})
this.$route.params.id    // 取出参数

这种传参方式的特点是，当你刷新一次页面时，路由参数会消失。

2. query

this.$router.push({
  path:'/user',  // 路由
  query:{      // 待传递的参数
     id: this.id
  }
})
this.$route.query.id    // 取出参数

这种传参方式的特点是，刷新页面之后的路由参数不会消失。

props

props一般用于父组件向子组件传递值，但默认在子组件内部无法改变父组件传过来的值，也即默认是单向传递。所以props默认有以下两个特点：

  • 总是根据父组件的值进行变化
  • 作为子组件data属性的初始值

下面我们来演示一下默认的用法：

父组件Father.vue：

<template>
	<div>
		<children
		:userInfo="userInfo"
		></children>
	</div>
<template>
<script>
import Children from "./Children.vue"
export default {
	components: {
	      Children,
	    },
	data() {
		return {
			userInfo: '',
		}
	},
}
</script>

子组件：Children.vue

<template>
	<div>
		{{this.userInfo}}
	</div>
<template>
<script>
export default {
	props: {
		userInfo: {
      type: String,
      default() {
        return "";
      },
    },
	}
}
</script>

然后子组件中的userInfo就和父组件中的userInfo动态绑定起来了，但是在子组件中是无法改变userInfo的。

但是我们通过sync修饰符去实现双向绑定：

父组件Father.vue：

<template>
	<div>
		<children
		:userInfo.sync="userInfo"
		></children>
	</div>
<template>
<script>
import Children from "./Children.vue"
export default {
	components: {
	      Children,
	    },
	data() {
		return {
			userInfo: '',
		}
	},
}
</script>

子组件：Children.vue

<template>
	<div>
		{{this.userInfo}}
	</div>
<template>
<script>
export default {
	props: {
		userInfo: {
      type: String,
      default() {
        return "";
      },
    },
	},
	methods: {
		updateUserInfo(userInfo) {
			this.$emit('update:userInfo', userInfo);
		}
	}
}
</script>

然后我们就可以调用updateUserInfo函数在子组件中修改userInfo的值。

Vuex

Vuex将多个组件共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的 Vue 实例中，让其他组件可以使用，它最大的特点是响应式。
vuex由五个部分组成，分别是State，Mutation，Action，Module，Getter。
由于我们只是单纯的用于传递参数，所以只介绍state：

安装vue2对应的vuex：

cnpm install vuex@3.4.0 --save

首先在src目录下创建一个store文件夹：
在里面定义一个index.js文件：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 用户信息
    userInfo: '',
  },
  mutations: {
    // 更新用户信息
    updateUserInfo(state, userInfo) {
      state.userInfo = userInfo;
    },
  },
  actions: {
  },
  modules: {
  }
})

最后在main.js中注册store全局变量:

import store from './store'

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

我们可以使用以下的方式来获取和修改在vuex中定义的全局变量：

// 修改用户信息
this.$store.commit("updateUserInfo", res.data.user_info)
// 获取用户信息
this.$store.state.userInfo

浏览器缓存

当我们需要传递的变量比较大的时候，比如购物车列表、用户信息、token等等，可以存到浏览器缓存中，要使用的时候就取出来。

原生的javascript提供了一个API来访问浏览器缓存：

// 存数据
window.localStorage.setItem("key", value);
// 取数据
window.localStorage.getItem("key");
// 删数据
window.localStorage.removeItem("key");

另外如果要存的是map、array这种类型，可以先把数据格式化为json，取出来的时候再解码：

// 存数据
window.localStorage.setItem("key", JSON.stringify(value));
// 取数据
JSON.parse(window.localStorage.getItem("key"));