vue从一个页面将数据传到另一个页面的data中
最新回答
我是女神哦买噶
2024-04-22 15:24:11
一、路由传参（适用于页面跳转场景）
1. query参数（显示在URL中）
• 传递：在跳转时通过`router.push`携带`query`
• 示例：`this.$router.push({ path: '/target', query: { id: 123, name: 'test' } })`
• 接收：在目标页面通过`this.$route.query`获取
2. params参数（不显示在URL中，需配合命名路由）
• 传递：需先定义命名路由，再通过`name`跳转
• 示例：`this.$router.push({ name: 'Target', params: { id: 123 } })`
• 接收：在目标页面通过`this.$route.params`获取
二、Vuex状态管理（适用于跨组件/页面共享数据）
1. 配置Store：在`store/index.js`中定义`state`、`mutations`等
2. 传递：通过`this.$store.commit('mutationName', data)`修改状态
3. 接收：在目标页面通过`this.$store.state.xxx`获取
三、本地存储（适用于持久化数据传递）
1. sessionStorage：临时存储（页面关闭后清除）
• 传递：`sessionStorage.setItem('key', JSON.stringify(data))`
• 接收：`JSON.parse(sessionStorage.getItem('key'))`
2. localStorage：持久化存储（需手动清除）
• 传递：`localStorage.setItem('key', JSON.stringify(data))`
• 接收：`JSON.parse(localStorage.getItem('key'))`
四、事件总线（适用于非父子/兄弟组件通信）
1. 创建总线：在`main.js`中`Vue.prototype.$bus = new Vue()`
2. 传递：`this.$bus.$emit('eventName', data)`
3. 接收：`this.$bus.$on('eventName', (data) => { /* 处理逻辑 */ })`
4. 注意：需在组件销毁前调用`this.$bus.$off('eventName')`避免内存泄漏
五、Provide/Inject（适用于多层组件传递）
1. 祖先组件提供：`provide() { return { sharedData: this.data } }`
2. 后代组件注入：`inject: ['sharedData']`
3. 注意：非响应式（若需响应式需传递`this`或使用`ref`）
热门标签
