白店小二的面试总结——Vue里页面间传值

本文链接：https://blog.youkuaiyun.com/liyangyang1998/article/details/107831265

本文详细介绍了Vue.js中组件间的通信方式，包括props父子组件传值、路由跳转时的数据携带、Vuex状态管理、本地缓存的使用及事件监听器的绑定与接收。同时对比了params与query在路由跳转时的不同特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、父子组件传值
props
父组件
通过绑定变量对子组件传参

<player class="playAudio" v-if="playMusicd == true" :changeMusic="orchangeMusic"></player>

  components: { //父组件里定义子组件，才能在父组件里使用子组件
    player: player
  },

子组件

props: ["changeMusic"],//定义父组件的传参
data() {
    return {
    	orChangeMusic: this.changeMusic,//接收父组件传的参数
    }
}

2、跳转路由时携带数据
注意：
1、使用params时不能使用path。
2、使用query时可以使用path
3、params可以换成query，使用方法一致，当页面刷新时，params的参数会消失，query传值时不会消失，使用query时可以使用path。
4、传值时最好是传json，可以使用stringify转为json格式。
原页面

this.$router.push({
    name:"child",//通过name识别需要跳转到的路由
    params: {
      type: 'add'
     }
})

跳转页面

this.$router.params.type;//通过这样来获取参数值

路由配置

{
	path: '/child',
	name:"child"
	component: Child
},

3、使用Vuex
4、通过缓存传值
本地缓存localStorage,临时缓存sessionStorage，存值只能存储字符串类型，大概能存5MB。数组和对象需要转成json格式。

window.localStorage.setItem("recentSongs", this.recentSongs);//存
this.recentSongs = window.localStorage.getItem("recentSongs");//取

window.localStorage.setItem("loginMsg",JSON.stringify(info));
this.loginMsg = JSON.parse(window.localStorage.getItem("loginMsg"));

5、使用事件监听器
通过emit绑定一个事件名和参数，使用on接收事件名，然后在回调函数中获取参数。
注意：要在beforeDestroy()中关闭这个事件监听器。

vm.$emit('test', 'hi')；
vm.$on('test', function (msg) {
  console.log(msg)// => "hi"
})；
vm.$off('test');//在beforeDestroy()里销毁监听器