本文共 3283 字，大约阅读时间需要 10 分钟。

Vue.js 组件间数据传递方法大全

在 Vue.js 开发中，组件间的数据传递是日常开发中常见的操作。本文将详细介绍几种常用的数据传递方式，包括父传子、子传父、兄弟组件传参、Vuex、localStorage、sessionStorage等方法。

1. 父传子如何传递

1.1 父组件传递数据

1.2 子组件接收数据

2. 子传父如何传递

2.1 父组件绑定事件

2.2 子组件触发事件

3. Vue兄弟组件传参

3.1 使用 EventBus

3.1.1 创建 EventBus

import Vue from 'vue'export default new Vue()

3.1.2 发送数据

// 发送数据Bus.$emit('msg', this.oneMsg)

3.1.3 接收数据

// 接收数据Bus.$on('msg', (data) => {  this.twoMsg = data})

4. Vuex 传参

4.1 配置 Vuex

import Vuex from 'vuex'import VuexPersistence from 'vuex-persist'const vuexLocal = new VuexPersistence({  storage: window.localStorage})Vue.use(Vuex)export default new Vuex.Store({  state: {    user: {},    token: ''  },  mutations: {    setlong(state, user) {      state.user = user      state.token = user.token    }  },  plugins: [vuexLocal.plugin]})

4.2 使用 Vuex

5. localStorage 传值

5.1 存储数据

5.2 恢复数据

6. sessionStorage 传值

6.1 存储数据

6.2 恢复数据

7. 全局变量传值

7.1 main.js 配置

import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'Vue.config.productionTip = falseimport Component from '@/components/commpont.vue'Vue.component('Commpont', Component)new Vue({  router,  store,  render: h => h(App)}).$mount('#app')

7.2 组件使用

8. 路由传参

8.1 路由配置

import { createRouter, createWebHistory } from 'vue-router'export default createRouter({  history: createWebHistory(),  routes: [    { path: '/Order', name: 'Order', component: () => import('@/views/Order.vue') },    { path: '/login', name: 'login', component: () => import('@/views/login.vue') }  ]})router.beforeEach((to, from, next) => {  if (to.path === '/Order') {    if (!store.state.name) {      next('/login')    } else {      next()    }  } else {    next()  }})

8.2 方法使用

methods: {  insurance(id) {    this.$router.push({      path: `/particulars/${id}`    })  }}

9. Promise 传参

const fn = new Promise((resolve, reject) => {  setTimeout(() => {    reject('ok')  }, 1000)})fn.then().catch(console.log)

10. query 和 params 传参

10.1 query 方式

this.$router.push({  path: '/xxx',  query: {    id: id  }})// 接收参数this.$route.query.id

10.2 params 方式

this.$router.push({  name: 'xxx',  params: {    id: id  }})// 接收参数this.$route.params.id

11. $refs 传值

11.1 父组件引用

11.2 子组件方法

12. $parent 传值

13. $child 传值

13.1 父组件引用

13.2 子组件方法

13.3 子组件另一个实例

通过以上方法，可以在 Vue.js 应用中灵活地实现组件间的数据传递。根据具体需求选择最适合的传递方式，以确保应用的高效性和可维护性。

转载地址：http://qxxg.baihongyu.com/